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值
};
},
js
//拿取选中的值
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'
});
});
})
},