vue+elementUI表格关键字筛选高亮

<el-input

type="search"

v-model="search"

style="width:70%"

placeholder="请输入关键字"

></el-input>

</div>

<el-table :data="tableData" style="width: 100%" max-height="500">

<el-table-column

v-for="(item, index) in Object.keys(tableData[0])"

:key="index"

:label="item"

<span

class="col-cont"

v-html="showDate(scope.row[item])"

></span>

</template>

</el-table-column>

</el-table>

// 筛选变色

showDate(val) {

val = val + ''

console.log('val', val)

if (val.indexOf(this.search) !== -1 && this.search !== '') {

return val.replace(

this.search,

'<font color="#409EFF">' + this.search + '</font>'

)

} else {

return val

}

实现效果如下：

参考文章：https://blog.csdn.net/zuorishu/article/details/80899398

vue+elementUI表格关键字筛选高亮相关推荐

vue elementui 表格搜索筛选栏组件封装
1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项.表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,且多人开发情况下每个人写的样式都不相同,布局样式无法统一. ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
vue+element-ui表格实现隐私信息的加密展示和解密操作
vue+element-ui表格实现隐私信息的加密展示和解密操作(AES方法) 注:加密数据和密匙都由后端接口返回,这里仅对加密数据进行解密展示. 解密工具 : crypto-js 地址 : http ...
html5 输入框关键字搜索,vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: {{item.name}} ...
vue Element-ui 表格自带筛选框自定义高度
el-table中可以在一行的某列进行筛选,代码如下: <el-table-column prop="classOfTest" class="test" ...
vue ElementUI 表格筛选框的高度设置，超出一定高度，显示滚动条
相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...
html5 li表格纵向合并,vue elementui 表格合并/纵向表头
使用 elementui 做项目的时候大家应该会遇到很多关于表格的需求下面是总结的两个项目中遇到的问题. 查看文档的话是很简单, 但是很多需求还是需要大家自己去写的. 第一个 --- 表格合并 1. ...
elementui表格自定义筛选功能
1.子组件方式1:用调接口的方式去筛选数据 <el-popover v-model="isShowFilter"placement="right"wid ...
vue前端实现关键字搜索高亮
实现效果数据格式: keyList:[ {"name":"刘XX","posy":"VP"}, {"name ...

vue+elementUI表格关键字筛选高亮

vue+elementUI表格关键字筛选高亮相关推荐

最新文章

热门文章