1、常用行操作方法笔记
(1)element table动态复制添加行和批量删除多行数据
<el-row>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAddDetails">添加一行
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
@click="handleDeleteManyDetails"
>删除多行
</el-button>
</el-col>
</el-row>
<el-table :data="tabledate" style="width: 100%"
:row-class-name="rowClassName"
@selection-change="chandleDetailSelectionChange"
ref="tb">
<el-table-column type="selection" width="30" align="center"/>
</el-table-column>
</el-table>
export default {
//选中的数据
checkedDetail: [],
methods:{
//动态给表格添加行
rowClassName({row, rowIndex}) {
row.xh = rowIndex + 1;
},
//复制代码,添加一行
handleAddDetails() {
if (this.tabledate=== undefined) {
this.tabledate= [];
}
let obj = {};
//obj.year_month="2021-5";//可以给复制的行设置默认值
this.tabledate.push(obj);
},
//选中数据
chandleDetailSelectionChange(selection) {
//只可以选中一行
// if (selection.length > 1) {
// this.$refs.tb.clearSelection();
// this.$refs.tb.toggleRowSelection(selection.pop());
// } else {
// this.checkedDetail = selection;
// }
//可以选中多行
this.checkedDetail = selection;
},
//可删除多行
handleDeleteManyDetails(){
if (typeof(this.checkedDetail) == "undefined" ||this.checkedDetail.length === 0) {
this.$alert("请先选择要删除的数据", "提示", {
confirmButtonText: "确定",
});
} else {
console.log("选中的数量:"+this.checkedDetail.length);
this.$confirm('此操作将永久删除该数据,将会删除'+this.checkedDetail.length+'条数据 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//主要实现步骤,先把表格行数存到一个新数组
const arr1=[];
for (let i = 0; i < this.checkedDetail.length; i++) {
arr1.push(this.checkedDetail[i].xh);
}
//数字数组排序,因为选择框是根据先选择的顺序存到checkedDetail里面,所以需要排序
arr1.sort(function(a,b){
return a- b;
});
console.log("新数组排序后:"+arr1);
//逐个根据下标删除
for(let j=0;j<arr1.length;j++){
this.tabledate.splice(arr1[j] - j-1, 1);
}
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
}
(2)获取所有行数据
getAllRows() {
const RowData = this.$refs.tb.selection;
for (let i = 0; i < RowData.length; i++) {
console.log("获取所有行数据:" + RowData[i].(此处为v-model设置的参数));
}
},