爆改vue3 setup naiveui可编辑table

使用naiveui官网的可编辑table总是报错，所以手写了一个

思路：table数据数组unitMsgArr对应一个布尔的数组isEditArr ，点击table可编辑的行数据的时候，更改对应的isEdit为true，此时渲染组件EditCom，在EditCom组件中编辑完成，触发父组件的方法更改数据，完成编辑

table页面代码，重点在columns的配置

<n-data-table :columns="columns"
                  :data="unitMsgArr"
                  :bordered="true"
                  style="height:520px" />

<script>

//获取点击的行在数据数组unitMsgArr对应的index
const getDataIndex = (id: string) => {
      return unitMsgArr.value.findIndex((item) => item.id === id)
}
 //拿到前页面的unitMsgArr时，生成对应的是否边际数组 isEditArr   
const isEditArr = ()=>{
	unitMsgArr.value.forEach(()=>{
	   //默认都不可以编辑
    	return false
    })
}

	setup(){
	const createColumns = () => {
      return [
        {
          title: '姓名',
          key: 'name',
          width: 400
        },
        {
          title: '年龄',
          key: 'age',
          width: 400
        },
        {//可编辑列
          title: '编号',
          key: 'num',
          width: 300,
          render(row: unitType) {
            if (isEditArr.value[getDataIndex(row.id)] === false) {
              return h(
                NButton,
                {
                  text: true,
                  onClick: () => {
                    isEditArr.value[getDataIndex(row.id)] =
                      !isEditArr.value[getDataIndex(row.id)]
                  }
                },
                {
                  default: () => row.num
                }
              )
            } else {
              return h(EditCom, {
                rowData: row,
                onLoseFouce: (data: any) => {
                  changeNumFun(data)
                }
              })
            }
          }
        }
        }
      ]
    }
	}
</script>

自己创建一个组件EditCom，在table可编辑的列中使用

EditCom代码

<template>
  <div class="editBox">
    <n-space>
      <n-input class="inputBox"
               placeholder="输入编号"
               v-model:value="inputNum"></n-input>
      <n-button @click="submitNum">确定</n-button>
    </n-space>
  </div>
</template>
<script lang="ts">
import { ref, h，defineComponent } from 'vue'

// LoseFouce 父组件方法

export default defineComponent({
  name: 'editCom',
  props: {
    rowData: {
      type: Object,
      default: 0
    }
  },
  setup(props, context) {
    console.log(props.rowData.num)
    // 输入的数字
    const inputNum = ref(props.rowData.num)
    // 输入数字触发方法
    const changeNum = () => {
      console.log(inputNum.value)
    }
    // 点击确定触发方法
    const submitNum = () => {
      console.log('确定更改')
      context.emit('loseFouce', {
        indexNum: inputNum.value,
        id: props.rowData.id
      })

      // 将输入的数字传递到父组件
    }
    return {
      inputNum, //输入的数字
      changeNum, //改变数字
      submitNum //确定按钮
    }
  }
})
</script>