Skip to content

删除/多选删除

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) {

        // },
    }
}

反快餐主义者