vue搜索全表，加样式。给搜索过的数据加标签样式只加了文本，不能变成标签。

Question

别再说html了。

他加成了文本。

运行过后就这样了。

我要做的是这种效果

table表格数据~~~~

代码：

computed: {
 // table数据处理
 datas() {
 const filterName = XEUtils.toString(this.filterName)
 .trim()
 .toLowerCase();
 if (filterName) {
 const filterRE = new RegExp(filterName, "gi");
 const searchProps = ["stName"];
 const rest = this.dataSource.filter((item) =>
 searchProps.some(
 (key) =>
 XEUtils.toString(item[key])
 .toLowerCase()
 .indexOf(filterName) > -1
 )
 );
 return rest.map((row) => {
 const item = Object.assign({}, row);
 searchProps.forEach((key) => { // 改变字体颜色
 item[key] = XEUtils.toString(item[key]).replace(
 filterRE,
 (match) => `<span class="keyword-lighten">${match}</span>`
 );
 });
 return item;
 });
 }
 return this.dataSource;
 },
 },
 

获取数据

// 获取数据

findList() {

this.$api.generator.findAll({

page: this.tablePage.currentPage,

rows: this.tablePage.pageSize

}).then((data)=>{

this.dataSource = data.content;

this.tablePage.totalResult = data.totalElements;

})

},

搜索框

<vxe-input class="search-all" v-model="filterName" type="search" placeholder="全表搜索场站名"></vxe-input>

Answer 1

想把html字符串渲染出来用v-html

Answer 2

v-html