|
一、效果  懒得发什么动态图，直接静态就好了。 二、代码 本文参考代码：https://blog.csdn.net/qq_33791597/article/details/125605873 有需求的可以去看下原文，我是参考后又改造了一番
添加行
添加列
删除行
{{ item.label }}
删除列
columnLabel: '', //要增加的列名
columnPropIndex: 3, //列属性自增
columnData: [{label:'测试1',prop:"items0"},{label:'测试2',prop:"items1"},{label:'测试3',prop:"items2"}],//列标题数组
checkedDetail:[],
//表格数据
tableData: [
{
items0: '666',
items1: '666',
items2: '666'
},
{
items0: '777',
items1: '777',
items2: '777'
},
{
items0: '888',
items1: '888',
items2: '888'
}
]
/** 添加行 */
addRows() {
const circle = this.tableData[0]; //取出数组中第一个对象
if (circle) {
const newObj = {};
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
newObj[key] = '';
}
this.tableData.splice(this.tableData.length, 0, newObj);
}
},
/** 选择行 */
handleDetailSelectionChange(selection){
if (selection.length > 1) { //删除一行
this.$refs.tb.clearSelection();//清空用户的选择
this.$refs.tb.toggleRowSelection(selection.pop());//切换某一行的选中状态
} else {
this.checkedDetail = selection;
}
},
/** 删除行 */
deleteRows() {
if (this.checkedDetail.length == 0) {
this.$alert("请先选择要删除的数据", "提示", {
confirmButtonText: "确定",
});
} else {
this.tableData.splice(this.checkedDetail[0].index-1,1);
}
},
/** 添加行索引 */
rowClassName({ row, rowIndex }) {
row.index = rowIndex + 1;
},
/** 添加列 */
addColumn() {
this.$prompt("请输入列名", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(({ value }) => {
this.columnLabel = value
const _this = this;
// 1、//列标题数组中 增加一个标题
const columnObj = {};
var propStr = 'items'; //自定义一个列属性；
columnObj.prop = propStr + this.columnPropIndex; //拼接自增数
columnObj.label = this.columnLabel;
this.columnData.push(columnObj);
_this.columnPropIndex++; //自增数每次加一
//2、数据包中每个对象增加一个生成的新属性
_this.tableData.forEach(function (item, index) { //遍历数据包
//每个对象新加一个属性 每一行数据值默认给''
if (index
//最后一个给null 才会是删除列的按钮 不然是输入框
_this.$set(item, columnObj.prop, null);
}
});
});
},
/** 删除列 */
deleteColumns(property) {
const _this = this;
// 你想删除属性:property
_this.tableData.forEach(function (item, index) { //遍历数组中的每个对象 删除指定的属性
_this.$delete(item, property);
});
// 2、删除表头数组里的数据
_this.columnData.forEach(function (item, index) {
if (item.prop === property) {
_this.columnData.splice(index, 1);
}
});
},
|