Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
342 views
in Technique[技术] by (71.8m points)

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

别再说html了。
$A`ZSQ6K2XA{[]V%TL%{6%W.png

他加成了文本。
$N_LRK%}DB6[{BOA91~VSO9.png

运行过后就这样了。
image.png

我要做的是这种效果
image.png

table表格数据~~~~
image.png
image.png

代码:


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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...