美文网首页
Element表格关键字高亮

Element表格关键字高亮

作者: coderfl | 来源:发表于2021-11-18 14:34 被阅读0次
      <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

    相关文章

      网友评论

          本文标题:Element表格关键字高亮

          本文链接:https://www.haomeiwen.com/subject/wmwdtrtx.html