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: "无痛"
            }
          ]
        }
      ]
    };
  },

 

转载于:https://www.cnblogs.com/TreeCTJ/p/11236942.html