Element UI的数据表格数据检索方法
vue兼容性很好的前端组件,刚开始上手,感觉这一些方法功能蛮强大的,跟大家分享一下吧。
一、表体数据检索
1.1、样式检索
如图,我们想根据数据表格中出现的特定文本(优、良、中)进行样式的检索,这种情况下可以去使用 el-table 的【 :cell-style】属性,属性值是一个检索的方法。
举个栗子 🌰
<el-table
:data="tableData"
border
:cell-style="cellStyle"
size="small"
>
</el-table-column>
<el-table-column
align="center"
prop="enterpriseName"
label="企业名称"
>
</el-table-column>
<el-table-column
align="center"
prop="level"
width="150"
label="企业等级"
></el-table-column>
<el-table-column
align="center"
prop="score"
width="150"
label="当前分数"
></el-table-column>
<el-table-column
align="center"
prop="datetime"
label="时间"
:formatter="timeRend"
></el-table-column>
</el-table>
//数据表格单元格数据检索
function cellStyle(row, column, rowIndex, columnIndex) {
if (row.column.label == "企业等级" && row.row.level == "良") {
return "color:#2C71C1; font-weight: 700;";
}
if (row.column.label == "企业等级" && row.row.level == "优") {
return "color:#08AD2B;font-weight: 700;";
}
if (row.column.label == "企业等级" && row.row.level == "中") {
return "color:#fac82c;font-weight: 700;";
}
}
1.2、内容检索
某些情况下,我们还要去加工处理数据,比如说时间格式、数据类型(0-女、1-男)。这种情况下可以去使用 el-table-column【 :formatter】属性,属性值是也是一个检索的方法。
再举个栗子 🌰☝ (还是拿的上面的html做的例子)
function timeRend(row, column, cellValue, index) {
//cellValue 过来是这样的2022-04-24 08:32:26; 我们要显示成这样 -- 2022-04-24
if (cellValue != "") {
return cellValue.split(" ")[0];
}
}
二、表头检索
表头检索用到的都是样式检索,内容检索的话,自己写死就好了啊 ( •̀ ω •́ )✧ 类似下图,表头的样式需要根据内容来进行返回样式值的时候,我们就用到 el-table的【:header-cell-style】,赋值一个检索的方法。
<el-table
stripe
border
size="mini"
:data="tableData"
:header-cell-style="headStyle"
>
<el-table-column
label="优(个)"
align="center"
prop="excell"
:formatter="textRend"
/>
<el-table-column
label="良(个)"
align="center"
prop="good"
:formatter="textRend"
/>
<el-table-column
label="中(个)"
align="center"
prop="fair"
:formatter="textRend"
/>
<el-table-column
label="差(个)"
align="center"
prop="rangec"
:formatter="textRend"
/>
</el-table>
function headStyle(row, column, rowIndex, columnIndex) {
if (row.column.label == "优(个)") {
console.log(row.column.label);
return {
color: "#5fbc36",
};
}
if (row.column.label == "良(个)") {
console.log(row.column.label);
return {
color: "#2C71C1",
};
}
if (row.column.label == "中(个)") {
console.log(row.column.label);
return {
color: "#FAC82C",
};
}
}
OK,数据表格上检索的用法就差不多这个多,有问题大家可以一起讨论。