vue实践-删除按钮的实现
Button按钮<el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"type="danger"
·
element.js
import { Message, MessageBox, Loading, Notification } from 'element-ui'
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
button按钮
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="btnDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
method方法
methods: {
btnDelete(index, row) {
console.log(index, row);
this.$confirm(`确认是否删除姓名为${row.name}的记录?`, '删除', {
confirmButtonText: '确定',
}).then(() => {
let res = this.tableData.splice(index, 1)
let msg = `删除成功`
if (!res) {
msg = `删除失败`
}
this.$message({
type: 'info',
message: msg
});
})
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)