Recommand · July 6, 2021 0

How to apply color to specific properties using el-search-table-pagination

I use el-search-table-pagination in my project, the problem is that I do not know how to set the color for a specific property, I have a column of names, I need to do this for those names that are equal to "Sam", paint them red, and those names that even tony paint green

el-search-table-pagination npm

el-search-table-pagination api

Here is my code in 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>