element-ui table组件 自定义单元格内容 ; 单元格关键字(支持多个)飘红
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一、自定义单元格内容
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…
——————————————————
加油,每天成长一点点,祝好~
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)