动态渲染element组件el-table表头项+自定义el-table列表项

动态渲染el-table表头项+自定义el-table列表项

现在不少项目的表格需要结合穿梭框动态显示表头有哪些项，但按照el-table原本的设置，有多少项就直接在html写多少个el-table-column，这样对于动态显示内容来说很麻烦，下面看简单的实现效果

这是默认全都显示

选择隐藏项

这是选择后的列表内容

下面上代码

//右边的抽屉和里面的穿梭框
      <el-drawer
          title=""
          size="800px"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose"
        >
          <el-transfer
            filterable
            id="myTransfer"
            :titles="titles"
            :filter-method="filterMethod"
            filter-placeholder="请输入城市拼音"
            v-model="value"
            :data="data"
            @change="handleChange"
          >
          </el-transfer>
        </el-drawer>

//表格内容
  <el-table :data="tableData" style="width: 100%">
        <template v-for="(item, index) in data">
        //这是基础样式项
          <el-table-column
            v-if="item.label != '操作' && item.label != '就诊状态'"
            :prop="item.value"
            :label="item.label"
            :key="index"
            align="center"
          >
          </el-table-column>
		//就诊状态前面需要有个小伪元素所以就用了自定义列
          <el-table-column
            v-if="item.label == '就诊状态'"
            label="就诊状态"
            align="center"
            class-name="status_col"
            :key="index"
          >
            <template slot-scope="scope">
              <i
                class="status"
                :style="{ color: statusColor[scope.row.state] }"
              ></i>
              <span style="margin-left: 10px">{{ scope.row.stateName }}</span>
            </template>
          </el-table-column>
          //操作里面还需要再循环一次所以也用了自定义列
          <el-table-column
            v-if="item.label == '操作'"
            prop="state"
            label="操作"
            align="center"
            :key="index"
          >
            <template slot-scope="scope">
              <span
                v-for="ele in scope.row.operations"
                style="
                  display: inline-block;
                  margin-left: 10px;
                  cursor: pointer;
                "
                :class="{ stop: ele.id == 1 }"
                :key="ele.id"
                >{{ ele.title }}
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table>

export default {
 data() {
    const generateData = (_) => {
      const data = [];
      const cities = [
        "序号",
        "姓名",
        "性别",
        "年龄",
        "手机号",
        "就诊状态",
        "就诊时间",
        "科室",
        "操作",
      ];
      const pinyin = [
        "xuhao",
        "xingming",
        "xingbie",
        "nianling",
        "shoujihao",
        "jiuzhenzhuangtai",
        "jiuzhenshijian",
        "keshi",
        "caozuo",
      ];
      const value = [
        "id",
        "patientName",
        "sexName",
        "age",
        "phone",
        "stateName",
        "acceptsTime",
        "departmentName",
        "zhuangtai",
        "",
      ];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index],
          value: value[index],
        });
      });
      return data;
    };
    return {
      statusColor: ["#FF5252", "#1CD86C", "#2C92F0", "#6E6E6E", "#FF52A3"],
      operations: [],
      drawer: false,
      direction: "rtl",
      tableHeader:[],
      data: generateData(),
      value: [],
      titles: ["显示", "隐藏"],
      filterMethod(query, item) {
        return (
          item.label.indexOf(query) > -1 || item.pinyin.indexOf(query) > -1
        );
      },
      movedKeys: [],
    };
  },
  created() {
    this.getMedicalList();
    this.tableHeader = this.data;
  },
  methods：{
        //关闭右边抽屉并更新表头内容
       handleClose(done) {
         done();
        this.tableHeader = this.data.filter((item, index) => {
        if (this.movedKeys.indexOf(index) == -1) {
          return item;
        } 
         });
      },

    //穿梭框数据左右移动
    handleChange(value, direction, movedKeys) {
      if (direction == "right") {
        movedKeys.forEach((item) => {
          this.movedKeys.push(item);
        });
      } else {
        this.movedKeys = this.movedKeys.filter((item) => {
          let newItem;
          movedKeys.forEach((ele) => {
            if (item != ele) {
              newItem = item;
            }
          });
          return newItem;
        });
      }
    },
  }
  //获取就诊列表（这是我从后台请求的列表数据）
    async getMedicalList() {
      let req = {
        patientName: this.name,
        patientPhone: this.tel,
        length: 20,
        page: this.currentPage1,
        deptId: this.department,
        state: Number(this.status),
        startTime: this.time[0],
        endTime: this.time[1],
      };
      let res = await this.$store.dispatch(
        "recievePatient/getMedicalList",
        req
      );
      if (res) {
        this.tableData = res.list;

        //根据就诊状态判断操作类型
        res.list.forEach((item) => {
          if (item.state == 3) {
            item.operations = [
              {
                id: 0,
                title: "查看",
              },
              {
                id: 2,
                title: "---",
              },
            ];
          } else {
            item.operations = [
              {
                id: 0,
                title: "查看",
              },
              {
                id: 1,
                title: "停诊",
              },
            ];
          }
        });
      } else {
        this.tableData = [];
      }
    },