示例代碼
<template>
<div>
<el-table
:data="tableData1"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
:row-class-name="tableRowClassName"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
<el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">刪除</el-button>
<el-button type="text" size="small">編輯</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData1: [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀區金沙江路 1518 弄",
hasChildren: true
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀區金沙江路 1517 弄",
hasChildren: true
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀區金沙江路 1519 弄",
hasChildren: true
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀區金沙江路 1516 弄",
hasChildren: true
}
],
};
},
methods: {
load(tree, treeNode, resolve) {
let list = [
{
id: tree.id * 9,
date: "2020" + tree.id + "4",
name: tree.name + "aaa",
address: tree.address + "bbb"
}
];
setTimeout(() => {
resolve(list);
}, 1000);
},
handleClick(row) {
// 刪除
console.log(row.index,'this.selection.index,')
this.tableData1.splice(row.index,1);
},
//獲取當前點擊行下標
tableRowClassName({ row, rowIndex }) {
console.log(row, rowIndex)
//把每一行的索引放進row
row.index = rowIndex;
}
}
};
</script>