<template>
<div class="mod">
<div class="info">
<ul>
<li v-for="e,i in cols" @click="del(e,i)">{{e.label}}</li>
</ul>
</div>
<el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
<el-table-column type="selection" width="55"></el-table-column>
<template v-for="(e,i) in cols" v-if="flag.indexOf(e.prop) == -1">
<el-table-column :prop="e.prop" :label="e.label"></el-table-column>
</template>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
cols: [
{ label: "姓名", prop: "name", id: 1 },
{ label: "日期", prop: "date", id: 2 },
{ label: "地址", prop: "address", id: 3 }
],
flag: [],
tableData: [
{
date: "2016-05-02",
name: "王小虎1",
address: "上海市普陀區金沙江路 1518 弄",
id: 1,
fig: true
},
{
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀區金沙江路 1517 弄",
id: 2,
fig: true
},
{
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀區金沙江路 1519 弄",
id: 3,
fig: true
},
{
date: "2016-05-03",
name: "王小虎4",
address: "上海市普陀區金沙江路 1516 弄",
id: 4,
fig: true
}
],
id: ""
};
},
methods: {
handleSelect(key, keyPath) {
if (key == 1) {
this.$router.push({ path: "/demo" });
}
},
tableRowClassName({ row, rowIndex }) {
if (row.fig == false) {
return "warning-row";
} else {
return "";
}
},
handleClick(row) {
row.fig = false;
},
del(e, i) {
console.log(e, i);
this.flag.push(e.prop)
},
}
};
</script>
<style scoped>
</style>
<style>
.mod .el-table .warning-row {
display: none;
}
.info {
display: flex;
}
</style>
element 設置列
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.