有美人兮，见之不忘，一日不见兮，思之如狂。
废话不多说了，直接上代码
一、html部分
<!--删除按钮和搜索框部分-->
<div class="deleteSearch">
<el-button type="primary" @click="deleteBatch()" icon="el-icon-delete" plain>删除</el-button>
<el-input v-model="searchText" placeholder="请输入内容" clearable></el-input>
</div>
<!--表格部分-->
<el-table
:data="tables"
ref="multipleTable"
@selection-change="handleSelectionChange"
border
height="465"
style="width: 100%">
<el-table-column align="center" type="selection" width="70"></el-table-column>
<el-table-column type="index" label="No." align="center" width="90"></el-table-column>
<el-table-column prop="wlbm" label="代码" width="150"></el-table-column>
<el-table-column prop="qc2" label="长描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="jc2" label="短描述" show-overflow-tooltip></el-table-column>
</el-table>
二、JS部分
1、在data中定义变量
data() {
return {
searchText:'', //搜索内容
tableData:[
{
"qc2": "回液接头 ZY12000/20/40D液压支架 FATA250/50-9",
"wlbm": "10465084",
"jc2": "回液接头 ZY12000/20/40D液压支架 FATA250/50-9"
}, {
"qc2": "刮板输送机 SGZ1000/2800",
"wlbm": "10472715",
"jc2": "刮板输送机 SGZ1000/2800"
}, {
"qc2": "斜齿轮 P-30B扒斗机 19CA50101-2",
"wlbm": "10467568",
"jc2": "斜齿轮 P-30B扒斗机 19CA50101-2"
}, {
"qc2": "轴承座 SUCT209",
"wlbm": "10474550",
"jc2": "轴承座 SUCT209"
}, {
"qc2": "高压防爆异步电动机 YB3-40010-2 500kW 10KV ExdⅡBT4 IP55 F",
"wlbm": "10480161",
"jc2": "高压防爆异步电动机 YB3-40010-2 500kW 10KV ExdⅡBT4"
}
],//表格数据
multipleSelection: [],//多选数据
}
},
2、在methods实现功能
//表格全选
handleSelectionChange(val) {
this.multipleSelection = val;
},
//删除
deleteBatch() {
var d = this.tableData;
this.$refs.multipleTable.selection.forEach((Ele, index) => {
for(var i = 0; i<d.length; i++ ){
var t = d[i].wlbm;
if( t == Ele.wlbm ){
d.splice(i , 1);
}
}
})
},
3、通过计算属性实现搜索功能
computed:{
tables:function(){
var search = this.searchText;
if(search){
return this.tableData.filter(function(dataNews){
return Object.keys(dataNews).some(function(key){
return String(dataNews[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData
}
},
最终实现效果：
