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

他加成了文本。

运行过后就这样了。

我要做的是这种效果

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>

回答

v-html

以上是 vue搜索全表,加样式。给搜索过的数据加标签样式只加了文本,不能变成标签。 的全部内容, 来源链接: utcz.com/a/49433.html

回到顶部