table自定义表头为select

只有一个表头是select

<template>
  <div>
    <el-button @click="click">提交</el-button>
    <el-table :data="tableData" style="width: 100%">
     <!-- v-if里面的index根据有多少个不需要转换的进行规定数字 -->
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        v-if="index < 4"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template scope="scop">
          <el-input v-model="scop.row[item.prop]" style="width:50px" />
        </template>
      </el-table-column>
      <!-- 需要转换为select的表头 -->
      <el-table-column
        :render-header="(h) => renderHeaderA(h, index - 4, item.prop)"
        v-for="(item, index) in tableHeader"
        :key="index"
        v-if="index >= 4"
        :prop="item.prop"
        align="center"
      >></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 初始数据
      tableData: [],
      // 表头数据
      tableHeader: [
        {
          prop: "a1",
          label: "一月"
        },
        {
          prop: "a2",
          label: "二月"
        },
        {
          prop: "a3",
          label: "三月"
        },
        {
          prop: "a4",
          label: "四月"
        },
        // select默认值
        {
          prop: "nian",
          label: "年份"
        }
      ],
      // select默认值
      chooseHead: {
        nian: ""
      },
      // select默认值为""时渲染的提示
      startStatus: ["请选择年份"]
    };
  },
  methods: {
    // 渲染el-select
    renderHeaderA(h, index, prop) {
      console.log(h);
      console.log(index);
      console.log(prop);
      // el-select中el-option的数据
      let filters = [];
      filters = [
        {
          text: "2019",
          value: "receiveA"
        },
        {
          text: "2020",
          value: "receiveB"
        }
      ];
      // 渲染el-select
      return h("div", [
        h(
          "el-select",
          {
            on: {
              input: value => {
                this.chooseHead[prop] = value;
                this.getList(value);
              }
            },
            props: {
              value: this.chooseHead[prop] || this.startStatus[index],
              size: "small",
              // 样式修改
              style: {
                height: "25px",
                width: "110px",
                paddingLeft: "0px",
                paddingRight: "0px"
              }
            }
          },
          [
            filters.map(item => {
              return h("el-option", {
                props: {
                  value: item.value,
                  label: item.text
                }
              });
            })
          ]
        )
      ]);
    },
    // 假装是请求
    getList(value) {
      if (value == "receiveB") {
        this.tableData = [
          { id: 2, a1: 2, a2: 3, a3: 4, a4: 5, nian: "receiveB" }
        ];
      } else if (value == "receiveA") {
        this.tableData = [
          { id: 1, a1: 1, a2: 2, a3: 3, a4: 4, nian: "receiveA" }
        ];
      }
    },
    click() {
      console.log(this.tableData);
    }
  }
};
</script>

自定义表头中有多个select

<template>
  <div>
    <el-button @click="click">提交</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        v-if="index < 4"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template scope="scop">
          <el-input v-model="scop.row[item.prop]" style="width:50px" />
        </template>
      </el-table-column>
      <el-table-column
        :render-header="(h) => renderHeaderA(h, index - 4, item.prop)"
        v-for="(item, index) in tableHeader"
        :key="index"
        v-if="index >= 4"
        :prop="item.prop"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ id: 1, a1: 1, a2: 2, a3: 3, a4: 4, nian: "receiveA" }],
      // 表头数据
      tableHeader: [
        {
          prop: "a1",
          label: "一月"
        },
        {
          prop: "a2",
          label: "二月"
        },
        {
          prop: "a3",
          label: "三月"
        },
        {
          prop: "a4",
          label: "四月"
        },
        // select默认值
        {
          prop: "nian",
          label: "年份"
        },
                {
          prop: "procedureStamp",
          label: "是否已刻录"
        }
      ],
      // select默认值
      chooseHead: {
        nian: "",
        procedureStamp:""
      },
      startStatus: ["年份", "刻录状态"]
    };
  },
  methods: {
    renderHeaderA(h, index, prop) {
      console.log(h);
      console.log(index);
      console.log(prop);
      let filters = [];
      // 这里是可以控制有多少个select,
      switch (index) {
        case 0:
          filters = [
            {
              text: "2019",
              value: "receiveA"
            },
            {
              text: "2020",
              value: "receiveB"
            }
          ];
          break;
        case 1:
          filters = [
            {
              text: "已刻录",
              value: "trailA"
            },
            {
              text: "未刻录",
              value: "trailB"
            }
          ];
          break;
        default:
          break;
      }
      return h("div", [
        h(
          "el-select",
          {
            on: {
              input: value => {
                this.chooseHead[prop] = value;
                if (prop == "nian") {
                  this.getList(value);
                }else if(prop == 'procedureStamp'){
                    alert('是否刻录chage触发');
                }
              }
            },
            props: {
              value: this.chooseHead[prop] || this.startStatus[index],
              size: "small",
              style: {
                height: "25px",
                width: "110px",
                paddingLeft: "0px",
                paddingRight: "0px"
              }
            }
          },
          [
            filters.map(item => {
              return h("el-option", {
                props: {
                  value: item.value,
                  label: item.text
                }
              });
            })
          ]
        )
      ]);
    },
    // 假装是请求
    getList(value) {
      if (value == "receiveB") {
        this.tableData = [
          { id: 2, a1: 2, a2: 3, a3: 4, a4: 5, nian: "receiveB" }
        ];
      } else if (value == "receiveA") {
        this.tableData = [
          { id: 1, a1: 1, a2: 2, a3: 3, a4: 4, nian: "receiveA" }
        ];
      }
    },
    click() {
      console.log(this.tableData);
    }
  }
};
</script>