vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮

第vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮本文實(shí)例為大家分享了vueelementUI表格關(guān)鍵字篩選高亮的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

template

divclass=""

div

!--篩選--

div

div篩選：/div

el-inputtype="search"v-model="search"placeholder="請輸入關(guān)鍵字"/el-input

/div

/div

!--表格--

div

el-table

:data="tables"

max-height=500

!--地址--

el-table-columnlabel="時(shí)間"

templateslot-scope="scope"

spanv-html="showDate(scope.row.date)"/span

/template

/el-table-column

!--用戶名--

el-table-columnlabel="用戶名"

templateslot-scope="scope"

spanv-html="showDate()"/span

/template

/el-table-column

!--地址--

el-table-columnlabel="地址"

templateslot-scope="scope"

spanv-html="showDate(scope.row.address)"/span

/template

/el-table-column

/el-table

/div

/div

/template

script

exportdefault{

data(){

return{

search:'',

tableData:[{

date:'2016-05-02',

name:'張三',

address:'上海市普陀區(qū)金沙江路1518弄'

},{

date:'2016-05-04',

name:'李四',

address:'上海市普陀區(qū)金沙江路1517弄'

},{

date:'2016-05-01',

name:'王五',

address:'上海市普陀區(qū)金沙江路1519弄'

},{

date:'2016-05-03',

name:'趙六',

address:'上海市普陀區(qū)金沙江路1516弄'

components:{},

computed:{

//實(shí)時(shí)監(jiān)聽表格

tables:function(){

constsearch=this.search

if(search){

returnthis.tableData.filter(dataNews={

returnObject.keys(dataNews).some(key={

returnString(dataNews[key]).toLowerCase().indexOf(search)-1

returnthis.tableData

mounted(){},

methods:{

//篩選變色

showDate(val){

val=val+'';

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

returnval.replace(this.search,'fontcolor="#409EFF"'+this.search+'/font')