直接上代码了
template部分:
<div class="inventoryBox">
<el-table :data="tables" style="width: 100%" height="300" :style="tableStock">
<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
<el-table-column label="产品名称">
<template slot-scope="scope">
<span class="col-cont" v-html="showDate(scope.row.productName)"></span>
<!-- 因为需要高亮标签 所以用v-html显示 -->
</template>
</el-table-column>
<el-table-column label="剩余库存" width="150">
<template slot-scope="scope">
<span class="col-cont" v-html="showDate(scope.row.leftCnt)"></span>
</template>
</el-table-column>
</el-table>
</div>
computed 里实时计算数据来源tables:
tables: function() {
const search = this.inventory;
if (search) {
return this.stocksData.filter(dataNews => {
return Object.keys(dataNews).some(key => {
return String(dataNews[key]).indexOf(search) > -1;
// return String(dataNews[key]).toLowerCase().indexOf(search) > -1; 小写匹配
});
});
}
return this.stocksData;
}
匹配搜索内容并高亮:
methods: {
showDate(val) {
val = val + "";
if (val.indexOf(this.inventory) !== -1 && this.inventory !== "") {
return val.replace(
this.inventory,
'<font color="#fec92e">' + this.inventory + "</font>"
);
} else {
return val;
}
},
}