自己做网站 最好的软件下载,西安企业网站开发哪家好,wordpress 自定义留言,html5网站模板使用naiveui官网的可编辑table总是报错#xff0c;所以手写了一个
思路#xff1a;table数据数组unitMsgArr对应一个布尔的数组isEditArr #xff0c;点击table可编辑的行数据的时候#xff0c;更改对应的isEdit为true#xff0c;此时渲染组件EditCom#xff0c;在EditC…使用naiveui官网的可编辑table总是报错所以手写了一个
思路table数据数组unitMsgArr对应一个布尔的数组isEditArr 点击table可编辑的行数据的时候更改对应的isEdit为true此时渲染组件EditCom在EditCom组件中编辑完成触发父组件的方法更改数据完成编辑
table页面代码重点在columns的配置
n-data-table :columnscolumns:dataunitMsgArr:borderedtruestyleheight: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代码
templatediv classeditBoxn-spacen-input classinputBoxplaceholder输入编号v-model:valueinputNum/n-inputn-button clicksubmitNum确定/n-button/n-space/div
/template
script langts
import { ref, hdefineComponent } 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
