1.效果：
2.html:
<template>
<el-table
class="gh-table"
:data="lists"
stripe
size="mini"
height="420px"
highlight-current-row
@current-change="currentChange"
>
<el-table-column class-name="my-category" width="150" label="类目名称" show-overflow-tooltip>
<template slot-scope="{ row }">
<el-radio v-model="category_id" :label="row.id" @change="radioChange(row)">
<span
v-html="row.category2 == `<font color='#f80808'></font>` || row.category2 == ''? row.category1 : row.category2"
></span>
</el-radio>
</template>
</el-table-column>
<el-table-column prop label="上级类目" show-overflow-tooltip>
<template slot-scope="{ row }">
<span
v-html="row.category2 == `<font color='#f80808'></font>` || row.category2 == '' ? '' : row.category1"
></span>
</template>
</el-table-column>
<el-table-column prop="desc_detail" label="介绍" show-overflow-tooltip>
<template slot-scope="{ row }">
<span v-html="row.desc_detail"></span>
</template>
</el-table-column>
</el-table>
</template>
3.script代码：
<script>
export default {
name: "",
components: {},
computed: {},
data() {
return {
search: "",
lists: null
};
},
methods: {
onSubmit(index = 1) {
getCategoryList({ page: index, search: this.search })
.then(res => {
this.lists = [];
this.page_mixin.count = res.counts;
let listData = res.lists; // 下面是把初始数据中的每一条数据的四个字段分别去和输入的内容进行匹配， // 如果某一字段中包含输入的内容，就往lists中加
listData.forEach(item => {
console.log("item", item);
if (
item.desc_detail.indexOf(this.search) > -1 ||
item.category1.indexOf(this.search) > -1 ||
item.category2.indexOf(this.search) > -1
) {
this.lists.push(item);
}
});
console.log("this.lists", this.lists); //将得到的每一条数据中的每一个字段进行处理,brightKeyword就是变高亮的方法
this.lists.map(item => {
item.category1 = this.brightKeyword(item.category1);
item.category2 = this.brightKeyword(item.category2);
item.desc_detail = this.brightKeyword(item.desc_detail);
});
console.log("this.lists", this.lists);
})
.catch(err => {});
},
brightKeyword(val) {
console.log("val", val);
let search = this.search; //判断这个字段中是否包含keyword //如果包含的话，就把这个字段中的那一部分进行替换成html字符
if (val.indexOf(search) !== -1) {
return val.replace(search, `<font color='#f80808'>${search}</font>`);
} else {
return val;
}
}
}
};
</script>
