element ui table表格 根据文本框输入内容，表格对应列匹配文字变红

<el-table :data="tableData" stripe size="medium" >
         <el-table-column prop="name" label="中文名称" :show-overflow-tooltip="true" width="200" sortable="custom">
              <template slot-scope="scope">
                    <span v-html="showDateName(scope.row.name)"></span>
              </template>
         </el-table-column>

</el-table>

 //改变查询结果中中文名称按搜索关键字变红
 showDateName(val){
        let tags = this.form.name;
        if (tags !== null && tags !== '') {
           let reg = new RegExp("(" + tags + ")", "g");
           if (val !== null && val !== '') {
               return val.replace(reg, "<font style='color:red'>$1</font>");
           } else {
               return val
           }
        } else {
            return val
        }
    }