elementui table表格树形数据

 

1.当数据行 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。

html:

<template>
    <div>
        <div id="formTable">
        <!--当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。-->
        <!--通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。-->
        <el-table
          row-key="id"
          :data="tableData"
          height="749"
          :header-cell-style="{
            textAlign: 'center',
            background: 'rgba(0, 103, 214, 0.1)',
          }"
          :cell-style="{ paddingLeft: '5%' }"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          highlight-current-row
          :span-method="objectSpanMethod"
        >
          <el-table-column
            label="文件夹名称"
            min-width="15%"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!--如果文件夹名称不为空-->
              <template v-if="scope.row.folderName !== ''">
                <!--如果文件夹下的内容是空的，那么也要显示:文件夹名(0)，只不过没有子元素而已-->
                <template v-if="scope.row.children.length == 0">
                  <i
                    :class="changeFx ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
                    :style="{
                      width: '20px',
                      height: '20px',
                      fontSize: '12px',
                      cursor: 'pointer',
                      color: '#333',
                    }"
                    @click="changeArrow"
                  ></i>
                  <i class="el-icon-folder"></i>
                  <span style="margin-left: 10px">{{scope.row.folderName}}</span>
                  <span style="margin-left: 10px; color: #b6b6b6">({{ scope.row.children.length }})</span
                  >
                </template>
                <template v-else>
                  <i class="el-icon-folder"></i>
                  <span style="margin-left: 10px">{{scope.row.folderName}}</span>
                  <span style="margin-left: 10px; color: #b6b6b6">({{ scope.row.children.length }})</span>
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="资源名称"
            prop="resourceName"
            min-width="16%"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="modifyTime"
            label="创建时间"
            min-width="23%"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="operate"
            label="操作"
            min-width="16%"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!--如果文件名称不为空-->
              <template v-if="scope.row.resourceName !== ''">
                <el-button
                  @click="handleView(scope.row)"
                  type="text"
                  size="small"
                  title="预览"
                  ><img src="../icons/button/el-icon-view.svg" alt=""
                /></el-button>
                <el-button
                  @click="handleDelete(scope.row)"
                  id="btn"
                  type="text"
                  size="small"
                  title="删除"
                  ><img src="../icons/button/el-icon-delete.svg" alt=""
                /></el-button>
              </template>
              <!--否则预览、删除按钮图标禁用（或者不展示也行）-->
              <template v-else>
                <el-button
                  @click="handleView(scope.row)"
                  type="text"
                  size="small"
                  title="预览"
                  disabled
                  ><img src="../icons/button/el-icon-view.svg" alt=""
                /></el-button>
                <el-button
                  id="btn"
                  @click="handleDelete(scope.row)"
                  type="text"
                  size="small"
                  title="删除"
                  disabled
                  ><img src="../icons/button/el-icon-delete.svg" alt=""
                /></el-button>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="预览区"
            min-width="30%"
            show-overflow-tooltip
            fixed="right"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

js:

<script>
export default {

    data() {
        return {
            changeFx:false,
            tableData:[]
        };
    },
    mounted(){
        this.tableData = [
          {"path":"F:\\ppt资源","modifyTime":"2023-02-07 12:42:06","children":[],"resourceName":"","id":3,"folderName":"ppt资源"},
          {"path":"F:\\照片资源","modifyTime":"2023-02-07 12:42:06","children":
              [{"path":"F:\\照片资源\\111.jpg","modifyTime":"2022-11-01 10:12:09","resourceName":"111.jpg","id":"1-1","folderName":""},
              {"path":"F:\\照片资源\\888.jpg","modifyTime":"2023-02-07 12:42:06","resourceName":"888.jpg","id":"1-2","folderName":""}],
          "resourceName":"","id":1,"folderName":"照片资源"},
          {"path":"F:\\留言资源","modifyTime":"2023-02-07 12:41:53","children":
              [{"path":"F:\\留言资源\\777.jpg","modifyTime":"2023-02-07 11:26:54","resourceName":"777.jpg","id":"2-1","folderName":""},
              {"path":"F:\\留言资源\\map.jpg","modifyTime":"2023-02-07 12:41:53","resourceName":"map.jpg","id":"2-2","folderName":""}],
          "resourceName":"","id":2,"folderName":"留言资源"}
        ];
    },
    methods:{
        changeArrow(){
            this.changeFx = !this.changeFx;
        },
        // 合并单元格
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        
            if (columnIndex === 4) {
                return {
                rowspan: 10,
                colspan: 0,
                };
            }
        },
  },
    
};
</script>