element实现自定义table列表，复选框控制生成头部动态渲染数据

其实很简单 不需要担心数据如何渲染，element会自动根据你的选中对象的label和prop去渲染后台数据，只需要你把你的prop和后台的prop写成一致的就行。自己理解哈，很简单。

html部分

                

                  {data.id}'"
                    trigger="click"
                  >
                    <el-checkbox
                      :indeterminate="isBuy"
                      v-model="buyCheckAll"
                      @change="buyCheckAllChange"
                    >全选
                    
"margin: 15px 0;">
                    
                      {{item.label}}
                    
                    
"customeRow">
                      "mini"
                        @click="closePopover()"
                      >取消
                      "primary"
                        size="mini"
                        @click="subPopover()"
                      >确定
                    
                    "reference"
                      type="primary"
                      size="mini"
                    >自定义列
                  
                
                
"pull-right">
                  "primary"
                    size="mini"
                  >导出
                
              
              <el-table
                :data="buyData"
                border
                row-key="id"
                align="left"
              >
                "index"
                  label="序号"
                >
                
                "(item, index) in buyCheckHead"
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                >
                
              

//数据部分
//成交金额TOP500客户 自定义列
const buyOptions = [
  { label: '买家昵称', prop: "buyerNick" },
  { label: '买家姓名', prop: 'realName' },
  { label: '手机号', prop: 'mobile' },
  { label: '成交金额', prop: 'tradeAmount' },
  { label: '成交订单数', prop: 'tradeCount' },
  { label: '笔单价', prop: 'olderPrice' },
  { label: '成交商品数', prop: 'oNum' },
  { label: '件单价', prop: 'shopPrice' }
];




      buyVisible: false, //自定义列  点击按钮效果
      //自定义列成交金额
      buyCheckAll: true,
      buyCheckedColumn: [],
      buyCheckHead: [],
      buyColumn: buyOptions,
      isBuy: false,
      buyData:[]

//首次加载 渲染table
  mounted() {
    this.buyCheckedColumn = this.buyCheckHead = buyOptions

  },

//方法部分
  //关于popover 弹框取消
    closePopover() {
   
      this.buyVisible = false
    },

    //成交金额自定义列 全选
    buyCheckAllChange(val) {
      this.buyCheckedColumn = val ? buyOptions : [];
      this.isBuy = false;
      console.log(val)
    },
    buyCheckedColumnChange(value) {
      console.log(value)
      let checkedCount = value.length;
      this.buyCheckAll = checkedCount === this.buyColumn.length;
      this.isBuy =
        checkedCount > 0 && checkedCount < this.buyColumn.length;

    },
    //确定
    subPopover() {
      console.log(this.buyCheckAll)
      console.log(this.isBuy)
      console.log(this.buyCheckedColumn)
      this.buyCheckHead = this.buyCheckedColumn
      this.buyVisible = false

    },