liang14658fox1.删除、查看
html
<el-table :data="tableData" border>
<el-table-column fixed prop="name" label="名称" width="150">
</el-table-column>
<el-table-column prop="age" label="年龄">
</el-table-column>
<el-table-column label="操作" width="300">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button @click="HandleDelete(scope.$index)" type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table><el-table :data="tableData" border>
<el-table-column fixed prop="name" label="名称" width="150">
</el-table-column>
<el-table-column prop="age" label="年龄">
</el-table-column>
<el-table-column label="操作" width="300">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button @click="HandleDelete(scope.$index)" type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>script
js
export default {
data() {
return {
tableData: [
{
name: '内容',
age: 18
}, {
name: '内容',
age: 18
}, {
name: '内容',
age: 18
}
]
}
},
methods: {
handleClick(val) {
},
HandleDelete(index) {
},
}
}export default {
data() {
return {
tableData: [
{
name: '内容',
age: 18
}, {
name: '内容',
age: 18
}, {
name: '内容',
age: 18
}
]
}
},
methods: {
handleClick(val) {
},
HandleDelete(index) {
},
}
}2. 批量删除(纯前端)
html
<el-button @click="deleteSelection()" type="danger" :disabled="multipleSelection.length == 0">批量删除</el-button>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div><el-button @click="deleteSelection()" type="danger" :disabled="multipleSelection.length == 0">批量删除</el-button>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>script
js
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
deleteSelection() {
// 显示确认对话框，用户确认后再删除选中的行
this.$confirm('确定删除选定内容？', '警告信息', {
confirmButtonText: '确定',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
// 批量删除选中的行
for (let i = 0; i < this.multipleSelection.length; i++) {
const index = this.tableData.indexOf(this.multipleSelection[i]);
this.tableData.splice(index, 1);
}
// 清空选中行的数组，不需要clearSelection()
this.multipleSelection = [];
this.$message({
type: 'success',
message: 'Selected rows have been deleted successfully!'
});
}).catch(() => {
// 用户取消操作时不执行任何操作
});
}
}
}export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
deleteSelection() {
// 显示确认对话框，用户确认后再删除选中的行
this.$confirm('确定删除选定内容？', '警告信息', {
confirmButtonText: '确定',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
// 批量删除选中的行
for (let i = 0; i < this.multipleSelection.length; i++) {
const index = this.tableData.indexOf(this.multipleSelection[i]);
this.tableData.splice(index, 1);
}
// 清空选中行的数组，不需要clearSelection()
this.multipleSelection = [];
this.$message({
type: 'success',
message: 'Selected rows have been deleted successfully!'
});
}).catch(() => {
// 用户取消操作时不执行任何操作
});
}
}
}