vue-表格动态生成操作序号
本博主在开发过程中,接到这样一个需求,大概就是有一个表格,改变(这里的改变,其实就是改变主键的状态,是或者否)其中一个字段的时候,动态的生成操作序号,以下是我的实现思路:
- 定义两个变量,这两个变量,一个存放表格的回显数据,一个存放操作的数据,当表格的主键字段变成是的时候,当前数据存放在操作数据的变量中,当表格的主键字段变成否的时候,在操作数据中删除此条数据
- 代码实现:
// 选择主键
selectPrimaryKeyChange(data, index) {
this.$refs['tableData.' + index + '.nullable'].validate();
let arrData = [...this.priKeyPositionList];
let arrTableData = [...this.form.tableData];
if (data.primaryKey === '1') {
// 如果主键选的是,把此条数据push到priKeyPositionList
arrData.push(data);
} else {
// 如果主键选的否
// 找到此条数据
let findIndex = arrData.findIndex((item) => item.key === data.key);
if (findIndex !== -1) {
// 删除数据
arrData.splice(findIndex, 1);
// 把回显数据的值改为null
arrTableData[index].priKeyPosition = null;
}
}
// 数据回显
arrData = arrData.map((item, index) => {
return {
...item,
priKeyPosition: index + 1,
};
});
// 对比,赋值
this.changeTableList(arrTableData, arrData);
this.priKeyPositionList = arrData;
this.form.tableData = arrTableData;
},
// 对比,赋值
changeTableList(dataList, prikeyList) {
for (let i = 0; i < dataList.length; i++) {
for (let j = 0; j < prikeyList.length; j++) {
if (dataList[i].key === prikeyList[j].key) {
dataList[i].priKeyPosition = prikeyList[j].priKeyPosition;
}
}
}
},