Vue + Element tree data table

 

template section

 　　　　　　Show only edit and delete button in the tree structure

　　　　　　Here I simply made a v-if judged in the Action column, to determine whether there is a level in this field

<div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        v-for="(item,index) in tableList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      ></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="primary"
            size="mini"
            v-if="!scope.row.date"
          >编辑</el-button>
          <el-button
            @click="downloadImg(scope.row)"
            type="text"
            size="small"
            v-if="!scope.row.date"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

data written as part of an array of objects tableList dom nodes do not have to write so much (easy maintenance), which is equivalent to the data needed to render the title and prop data

                 tableData which data is data in the table, if there are children, then there will be data element table will appear in a drop-down icon

Data () {
     return { 
      tableList: [ 
        { 
          label: "Level" , 
          prop: "DATE" 
        }, 
        { 
          label: "name" , 
          prop: "name" 
        }, 
        { 
          label: "Alias" , 
          prop: "Alias" 
        } , 
        { 
          label: "operator" , 
          prop: "operator" 
        }, 
        { 
          label: "status" ,
          about:"State" 
        } 
      ], 
      TableData: [ 
        { 
          ID: . 1 , 
          DATE: "Personal" , 
          Children: [ 
            { 
              ID: . 11 , 
              name: "Root second half package" , 
              Alias: "brothers is to cut" , 
              operator: "Tieshou relentless" , 
              State: "pain" 
            } 
          ] 
        }, 
        { 
          ID: 2 , 
          DATE: "department" ,
          Children: [] 
        }, 

        { 
          ID: . 3 , 
          DATE: "hospital" , 
          Children: [ 
            { 
              ID: 31 is , 
              name: "Root second half package" , 
              Alias: "brothers is to cut" , 
              operator: "Iron relentless hand " , 
              State: " painless " 
            }, 
            { 
              ID: 41 is , 
              name: " root second half package " , 
              Alias: " is to cut brothers ",
              operator: "relentless metal hand" , 
              State: "no pain" 
            } 
          ] 
        } 
      ] 
    }; 
  },