element-ui table组件 自定义单元格内容 ; 单元格关键字（支持多个）飘红

一、自定义单元格内容

1.原理：slot自定义单元格内展示内容

2.通过scope拿到表格内容

拿到每一行的index----------scope.$index

拿到每一行的数据-----------scope.row

template:

<el-table :data="tableData" style="width: 100%">
  <el-table-column
    v-for="(item,k) in config"
    :key="k"
    :prop="item.props"
    :label="item.label"
    width="180"
  >
    <template slot-scope="scope">
      {{ scope.row[`${item.props}`] }}
    </template>
  </el-table-column>
</el-table>

script:

export default {
  data() {
    return {
      config: [
        {
          props: "date",
          label: "日期",
        },
        {
          props: "name",
          label: "姓名"
        }
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
};

二、高亮单元格内关键词

<el-table :data="tableData" style="width: 100%">
  <el-table-column
    v-for="(item,k) in config"
    :key="k"
    :prop="item.props"
    :label="item.label"
    width="180"
  >
    <template slot-scope="scope">
      <div v-html="markKeyWord(scope.row[`${item.props}`])"></div>
    </template>
  </el-table-column>
</el-table>

scripts中methods里,添加函数:

markKeyWord(cellText) {
  // 1.传入关键词数组keyWordArr
  let keyWordArr = ["王","0"];
  // 2.定制关键词对应正则
  let regStr = '';
  keyWordArr.map((val,idx)=>{
    if(idx !== keyWordArr.length -1 ){
      regStr += `(${val})|`;
    }else{
      regStr += `(${val})`;
    }
  })
  console.log(regStr);
  let reg = new RegExp(regStr,"g");
  // 3.正则替换，关键词飘红
  let str = cellText.replace(reg, function($0,$1) {
    return  `<span style="color:red;">${$0}</span>`;
  });
  return str;
}

参考博客：https://blog.csdn.net/bright2017/article/details/77452648

最后吐槽一下vue体验:

• element-ui 易上手，文档齐全。表格自定义不友好，非响应式。窄屏头部导航换行。

• iview 表格友好（类似jsx），支持响应式。

• vue-cli2 配置外显,config文件夹，方便自配置。（个人倾向使用）

• vue-cli3 目录更简洁友好，config文件夹隐藏，自定义配置方式:
  新建文件src/vue.config.js； 配置环境变量：新建对应环境的文件，如.env, .env.prod, .env.test。
  美中不足：比如自定义资源路径，不同环境变量下，引入不同包，此时需要在vue.config.js修改相关配置。此时vue-cli3 相关文档不齐全，官网也没找到demo…

——————————————————

加油，每天成长一点点，祝好~