vue实现批量删除

2021-10-19 09:05:08 阅读：211 来源： 互联网

html代码

    <div class="sphere">
        <div class="btnClick">
            <!--// batchDelect点击事件 -->
            <!--// :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
            <el-button type="primary" @click="batchDelect(sels)" :disabled="this.sels.length === 0">批量删除</el-button>
        </div>
        <div class="TableList">
            <!--// 绑定事件 selection-change 当选择项发生变化时会触发该事件 -->
            <!--// row-click 当某一行被点击时会触发该事件 -->
            <el-table :data="tableData" align="center" v-loading="loading" border
                @selection-change="handleSelectionChange" @row-click="openDetails">
                <!--// 选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="clbh" label="车辆编号" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sssgs" align="center" label="所属省公司" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gssyy" align="center" label="归属实验员" show-overflow-tooltip></el-table-column>
                <el-table-column prop="kjcxm" align="center" label="可检测项目" show-overflow-tooltip></el-table-column>
                <el-table-column prop="kssysj" align="center" label="最近检修时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lxrdh" align="center" label="联系人电话" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jwd" align="center" label="当前经纬度" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sscs" align="center" label="所在城市" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gzzt" align="center" label="工作状态" show-overflow-tooltip></el-table-column>
                <el-table-column prop="zxrws" align="center" label="已执行任务数" show-overflow-tooltip></el-table-column>
            </el-table>
        </div>
    </div>

data

data() {
        return {
            tableData: [],//表格的数据
            sels: [], //当前选框选中的值
            ids: "",//id值
        };
   },

      //拿取选中的值
      handleSelectionChange(sels) {
        this.sels = sels
        console.log('选中的值', this.sels)
      },
      //批量删除
      batchDelect() {
        // 删除前的非空判断
        this.$confirm('确认删除记录吗?', '提示', {
                type: 'warning'
            })
            .then(() => {
                // this.sels.map(item => item.id) 循环sels拿到里面的id值，将拿到的id赋值给ids
                this.ids = this.sels.map(item => item.id)
                let data = {
                    ids: this.ids, //后台要求传递的参数
                }
                // deleteVehiclds 请求接口
                deleteVehiclds(data).then(res => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                });
            })
    },

标签：vue,批量,删除,ids,item,data,id,sels
来源： https://blog.csdn.net/Shids_/article/details/120835777

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue实现批量删除