最近需要做一个el-table的树形表格，并且需要这个表格前几列有序列号，复选框和折叠的功能，讲到这里功能还是很常规的，但是注意后边有个要求：列表折叠的部分也就是子节点前方不展示复选框不能被勾选，并且子节点不算在排序当中。此时如果表格中还是用
定义排序列、定义复选框列是行不通的。

操作如下：
第一：排序 此时需要在后端返回的数据中往父节点插入一个字段来定义充当索引序列，或是后端往返回的树形数据父节点添加一个排序的字段只有父节点有的。然后我们用这个字段来显示排序。
这里是后端同事给返回的数据父节点加了一个index字段我也就省些处理数据操作了、直接用这个index字段来渲染序列排序即可，这里还有一个小窍门需要注意，在一个表格中如果同时有排序和树形折叠符号另外还有复选框的时候，表格的第一列必须放一个空列目的是放折叠符号，因为折叠符号默认会在第一列占位那样的话会和排序列样式冲突导致排序的数字和折叠符号样式重叠！大家可以试一下，

      <el-table-column label=" " width="30px">
      </el-table-column>
      <el-table-column label=" " width="50px">
        <template slot-scope="scope">
          <div v-text="scope.row.index"></div>
        </template>
      </el-table-column>

第二：表格的复选框 这里为了不让树形表格的折叠项展示复选框就需要自定义el-table-column的表头和表内容了，
自定义表头有两种方法第一种是用element 中 :render-header=" " 方法

        <el-table-column label="" :render-header="renderCheckHeader" align="center">
          <template slot-scope="scope">
            <el-checkbox v-if="scope.row.index" @change="signCheckChange" v-model="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>

但是这种方法浏览器中会提示警告建议不用这种方式渲染，像我这种有洁癖的表示不能忍，所以尝试第二种方法，用插槽的形式来渲染表头，只需要定义slot=“header”，这时模板中的标签就会被渲染到表头当中，接着平级中再定义一个模板里边写表内容

       <el-table-column label="" align="center">
          //自定义的表头
          <template slot="header" slot-scope="{column}">
              <el-checkbox v-model="column.checked" :indeterminate="indeterminateFlag" :checked="allchecked" label="" @change="updateAllSelected"></el-checkbox>
          </template>
          //自定义表内容
          <template slot-scope="scope">
              <el-checkbox v-if="scope.row.index" @change="signCheckChange" v-model="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>

最终的效果如下图

下边我也将复选框的逻辑代码贴上

//data重定义的变量
      indeterminateFlag: false,    //表头复选框状态
      reRender: true,// 重新渲染列表使用
      allchecked: false,
// 点击复选框
    signCheckChange(){
      let allCheckedFlag = true;
      let allReset = true;
      this.tableData.forEach(item =>{
        if (item.checked == true){
          allReset = false
        } else {
          allCheckedFlag = false
        }
      })
      if (allCheckedFlag || allReset){
        this.indeterminateFlag = false
        if (allCheckedFlag){
          this.allchecked = true;
        } else {
          this.allchecked = false;
        }
      } else {
        this.indeterminateFlag = true
      }
      this.reRender = !this.reRender;
    },
    updateAllSelected(val){
      this.indeterminateFlag = false
      if (val){
        this.tableData.forEach(item =>{
          item.checked = true;
        })
      } else {
        this.tableData.forEach(item =>{
          item.checked = false;
        })
      }
    },
    //render-header方法
    renderCheckHeader(h,{column,$index}){
      return h("span", {}, [
        h('el-checkbox',{
          props: {
            checked: this.allchecked,
            indeterminate: this.indeterminateFlag    //表头复选框状态
          },
          on:{
            change: this.updateAllSelected // 选中事件 
          }
        })]);
    },

这里还有个字段checked是作为复选框的状态，在接口获取数据时遍历数据加进去的一个状态

res.attributes.detailData.forEach((v) => {   //遍历表格数据
            let obj = {};
            this.deepCopy(v, obj);
            v.checked = false;
            }