怎么在vue中使用elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選

這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中使用elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)是專業(yè)的川匯網(wǎng)站建設(shè)公司，川匯接單;提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行川匯網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

代碼：

<template>
 <div class="">
  <div class="top">
  <!-- 篩選 -->
   <div class="screen">
    <div >篩選：</div>
    <el-input type="search" v-model="search"  placeholder="請(qǐng)輸入關(guān)鍵字"></el-input>
   </div>
  </div>
  <!-- 表格 -->
  <div class="table">
   <el-table
    :data="tables"
    
    max-height=500>
   <!-- 地址 -->
    <el-table-column label="時(shí)間">
     <template slot-scope="scope"> 
      <span class="col-cont" v-html="showDate(scope.row.date)" ></span>
     </template>
    </el-table-column>
    <!-- 用戶名 -->
    <el-table-column label="用戶名">
     <template slot-scope="scope">
      <span class="col-cont" v-html="showDate(scope.row.name)" ></span>
     </template>
    </el-table-column>
    <!-- 地址 -->
    <el-table-column label="地址">
     <template slot-scope="scope">
      <span class="col-cont" v-html="showDate(scope.row.address)" ></span>
     </template>
    </el-table-column> 
   </el-table>
  </div>
 </div>
</template>

<script>
 export default {
  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)聽(tīng)表格
   tables: function() {
    const search = this.search
    if (search) {
     return this.tableData.filter(dataNews => {
      return Object.keys(dataNews).some(key => {
       return String(dataNews[key]).toLowerCase().indexOf(search) > -1
      })
     })
    }
    return this.tableData
   }
  },
  mounted() {},
  methods: {
   // 篩選變色
   showDate(val) {
    val = val + '';
    if (val.indexOf(this.search) !== -1 && this.search !== '') {
     return val.replace(this.search, '<font color="#409EFF">' + this.search + '</font>')
    } else {
     return val
    }
   }
  }
 }
</script>

效果圖：

關(guān)于怎么在vue中使用elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：怎么在vue中使用elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選
分享鏈接：http://muchs.cn/article12/ipiodc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、靜態(tài)網(wǎng)站、搜索引擎優(yōu)化、微信小程序、定制開(kāi)發(fā)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)