爆改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>