<template>
  <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
  <s-group-table
    v-model:data="tableData"
    :columns="columns"
  >
    <template #age="{row}">
      {{ row.age }}岁
    </template>
  </s-group-table>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'

const textJSON = computed({
  get () {
    return JSON.stringify(tableData.value, null, '\t')
  },
  set (value) {
    console.log(value)
    tableData.value = JSON.parse(value)
  }
})

const tableData: any = ref([
  { name: '张三', age: 22 },
  { name: '李四', age: 32 }
])

const columns = ref([
  {
    label: '姓名',
    key: 'name'
  },
  {
    label: '年龄',
    type: 'slot',
    key: 'age'
  }
])

function changeValue (key: string, value: any) {
  console.log(key, value)
}

function add () {
  tableData.value.push({})
}

function remove (row: any) {
  const index = tableData.value.findIndex((item: any) => item._rowKey === row._rowKey)
  tableData.value.splice(index, 1)
}
</script>
