Element UI的数据表格数据检索方法

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，数据表格上检索的用法就差不多这个多，有问题大家可以一起讨论。