vue+Element 表格中的樹形數據

 

template部分

 　　　　　　只在樹形的結構中顯示編輯與刪除按鈕

　　　　　　這里我只是簡單的做了一個 v-if 判斷在操作列中 ，判斷是否存在級別這個字段

<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部分   tableList 寫成數組對象dom節點不用寫那么多（方便維護），里面的數據相當於是標題和 prop 中需要渲染的數據

                 tableData里面的數據是表格中的數據，如果有children有數據的話就會 出現 element 表格中會出現一個下拉圖標

data() {
    return {
      tableList: [
        {
          label: "級別",
          prop: "date"
        },
        {
          label: "名稱",
          prop: "name"
        },
        {
          label: "別名",
          prop: "alias"
        },
        {
          label: "操作員",
          prop: "operator"
        },
        {
          label: "狀態",
          prop: "state"
        }
      ],
      tableData: [
        {
          id: 1,
          date: "個人",
          children: [
            {
              id: 11,
              name: "第二根半價套餐",
              alias: "是兄弟就來割",
              operator: "鐵手無情",
              state: "無痛"
            }
          ]
        },
        {
          id: 2,
          date: "科室",
          children: []
        },

        {
          id: 3,
          date: "全院",
          children: [
            {
              id: 31,
              name: "第二根半價套餐",
              alias: "是兄弟就來割",
              operator: "鐵手無情",
              state: "無痛"
            },
            {
              id: 41,
              name: "第二根半價套餐",
              alias: "是兄弟就來割",
              operator: "鐵手無情",
              state: "無痛"
            }
          ]
        }
      ]
    };
  },