Element表格关键字高亮

2021-11-18  本文已影响0人  coderfl
  <template>
    <el-table
      :data="tableData"
      :height="tableHeight"
      border
      style="width: 100%">
      <template v-for="(item, index) in tableCol">
        <el-table-column
          :key="index"
          :prop="item.prop"
          :label="item.label">
          <template slot-scope="scope">
            <span
              v-for="(v, i) in scope.row[item.prop]"
              :class="{'keyAct': keyword.indexOf(v) >= 0 && scope.row[item.prop].indexOf(keyword) >= 0}"
              :key="i">{{ v }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </template>

<script>
  data() {
    return {
      keyword: '',
    };
  },
  methods: {
    showKeyword(val) {
      this.keyword = val
    }
  }
</script>


<style scoped>
.keyAct{
  color: #00a0e9;
  font-weight: bold;
}
</style>
image.png
上一篇下一篇

猜你喜欢

热点阅读