删除/多选删除
HTML
<el-button @click="del">删除</el-button>
<el-table :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable" border>
<el-table-column type="selection" width="55" v-show="params.pyms" align="center" fixed></el-table-column>
<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-button @click="del">删除</el-button>
<el-table :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable" border>
<el-table-column type="selection" width="55" v-show="params.pyms" align="center" fixed></el-table-column>
<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
javaScript
export default {
data() {
return {
rowId:[]
multipleSelection:[], //多选
tableData: [
{
name: '内容',
age: 18
}, {
name: '内容',
age: 18
}, {
name: '内容',
age: 18
}
]
}
},
methods: {
多选赋值
handleSelectionChange(val){
this.multipleSelection=val
this.rowId=this.multipleSelection.map(item=>item.id)
打印 [1,2,3,4,5]
}
删除
del(){
this.multipleSelection.forEach(row => {
const index = this.tableData.findIndex(item => item === row);
if (index > -1) {
this.tableData.splice(index, 1);
if (!this.tableData.length) {
this.tableData.push({
zysfmxxh:'',// "住院收费明细序号",
mxxh: '',//"明细序号",
fymx:'',// "费用明细",
sl:'',// "数量",
dw:'',// "单位",
je:'',// "金额",
se:'',// "税额",
slv:'',// "增值税税率/征收率",
ylfwgbm:'',// "医疗服务贯标码",
bz:'',// "备注"
})
}
}
});
}
// handleClick(val) {
// },
// HandleDelete(index) {
// },
}
}
export default {
data() {
return {
rowId:[]
multipleSelection:[], //多选
tableData: [
{
name: '内容',
age: 18
}, {
name: '内容',
age: 18
}, {
name: '内容',
age: 18
}
]
}
},
methods: {
多选赋值
handleSelectionChange(val){
this.multipleSelection=val
this.rowId=this.multipleSelection.map(item=>item.id)
打印 [1,2,3,4,5]
}
删除
del(){
this.multipleSelection.forEach(row => {
const index = this.tableData.findIndex(item => item === row);
if (index > -1) {
this.tableData.splice(index, 1);
if (!this.tableData.length) {
this.tableData.push({
zysfmxxh:'',// "住院收费明细序号",
mxxh: '',//"明细序号",
fymx:'',// "费用明细",
sl:'',// "数量",
dw:'',// "单位",
je:'',// "金额",
se:'',// "税额",
slv:'',// "增值税税率/征收率",
ylfwgbm:'',// "医疗服务贯标码",
bz:'',// "备注"
})
}
}
});
}
// handleClick(val) {
// },
// HandleDelete(index) {
// },
}
}