javascript - 如何使用 el-search-table-pagination 将颜色应用于特定属性

Question

我在我的项目中使用 el-search-table-pagination，问题是我不知道如何为特定属性设置颜色，我有一列名称，我需要为那些等于的名称执行此操作“山姆”，把他们涂成红色，那些连托尼都涂成绿色的名字

el 搜索表分页 npm

el 搜索表分页 api

这是我在codesandbox中的代码

<template>
  <el-search-table-pagination
    type="local"
    :data="tableData"
    :page-sizes="[10, 10]"
    :columns="columns"
    :form-options="formOptions"
  >
  </el-search-table-pagination>
</template>

<script>
export default {
  data() {
    return {
      formOptions: {
        inline: true,
        submitBtnText: "Search",
        forms: [
          { prop: "name", label: "Name" },
          { prop: "mobile", label: "Mobile" },
          {
            prop: "sex",
            label: "Sex",
            itemType: "select",
            options: [
              { value: "", label: "All" },
              { value: 0, label: "Male" },
              { value: 1, label: "Female" },
            ],
          },
        ],
      },
      columns: [
        { prop: "name", label: "Name", width: 140 },
        { prop: "mobile", label: "Mobile", minWidth: 180 },
        {
          prop: "sex",
          label: "Sex",
          width: 100,
          render: (row) => {
            const { sex } = row;
            return sex === 0 ? "Male" : sex === 1 ? "Female" : "Unknow";
          },
        },
      ],
      tableData: [
        { name: "Sam", mobile: "15299xxxx", sex: 0 },
        { name: "Jean", mobile: "13452xxxx", sex: 1 },
        { name: "Tony", mobile: "187233xxxx", sex: 0 },
        { name: "Sam", mobile: "15299xxxx", sex: 0 },
        { name: "Jean", mobile: "13452xxxx", sex: 1 },
        { name: "Tony", mobile: "187233xxxx", sex: 0 },
        { name: "Sam", mobile: "15299xxxx", sex: 0 },
        { name: "Jean", mobile: "13452xxxx", sex: 1 },
        { name: "Tony", mobile: "187233xxxx", sex: 0 },
        { name: "Sam", mobile: "15299xxxx", sex: 0 },
        { name: "Jean", mobile: "13452xxxx", sex: 1 },
        { name: "Tony", mobile: "187233xxxx", sex: 0 },
        { name: "Sam", mobile: "15299xxxx", sex: 0 },
        { name: "Jean", mobile: "13452xxxx", sex: 1 },
        { name: "Tony13", mobile: "187233xxxx", sex: 0 },
      ],
    };
  },
};
</script>

标签： javascriptvue.jsvuejs2pagination