el-table多级表格

一只编程小菜鸟～～

已于 2024-03-12 16:22:47 修改

阅读量254

点赞数 1

文章标签： elementui 前端 javascript

于 2024-03-12 16:13:08 首次发布

本文链接：https://blog.csdn.net/qq_44206870/article/details/136654968

版权

本文介绍了如何使用ElementUI中的el-table组件在Vue应用中实现多级表格结构，展示了如何配置和渲染嵌套数据，以及如何使用span-method方法处理行合并。

摘要由CSDN通过智能技术生成

1.el-table实现多级表格展示数据

效果：

实现代码：

<template>
  <div>
    <div style="padding: 5px 10px">
      <el-table :data="tableData" height="calc(50vh - 80px)" :span-method="spanMethod"
                row-key="id" :tree-props="{children:'children',hasChildren:'hasChildren'}">
        <el-table-column label="列0" prop="column0">
          <template slot-scope="scope">
            <span
                v-if="scope.row.isParent">数据1：{{ scope.row.columnF0}}  数据2：{{ scope.row.columnF1 }}  数据3：{{ scope.row.columnF2 }}  </span>
            <span v-if="!scope.row.isParent">{{ scope.row.column1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="item in columnArr" :key="item.prop" :label="item.label" :prop="item.prop"
                         show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        {
          id: 21,
          columnF0: 'f001',
          columnF1: 'f002',
          columnF2: 'f003',
          isParent: true,
          children: [
            {
              id: 1,
              column0: '000',
              column1: '111',
              column2: '222',
              column3: '333',
              column4: '444',
              column5: '555',
              column6: '666',
              column7: '777',
              column8: '888',
              column9: '999',
              isParent: false,
            },
            {
              id: 2,
              column0: '000',
              column1: '111',
              column2: '222',
              column3: '333',
              column4: '444',
              column5: '555',
              column6: '666',
              column7: '777',
              column8: '888',
              column9: '999',
              isParent: false,
            },
          ]
        },
        {
          id: 22,
          columnF0: 'f001',
          columnF1: 'f002',
          columnF2: 'f003',
          isParent: true,
          children: [
            {
              id: 3,
              column0: '000',
              column1: '111',
              column2: '222',
              column3: '333',
              column4: '444',
              column5: '555',
              column6: '666',
              column7: '777',
              column8: '888',
              column9: '999',
              isParent: false,
            },
          ]
        },
        {
          id: 23,
          columnF0: 'f001',
          columnF1: 'f002',
          columnF2: 'f003',
          isParent: true,
          children: [
            {
              id:4,
              column0: '000',
              column1: '111',
              column2: '222',
              column3: '333',
              column4: '444',
              column5: '555',
              column6: '666',
              column7: '777',
              column8: '888',
              column9: '999',
              isParent: false,
            },
          ]
        }
      ],
      columnArr: [
        {label: '列1', prop: 'column1'},
        {label: '列2', prop: 'column2'},
        {label: '列3', prop: 'column3'},
        {label: '列4', prop: 'column4'},
        {label: '列5', prop: 'column5'},
        {label: '列6', prop: 'column6'},
        {label: '列7', prop: 'column7'},
        {label: '列8', prop: 'column8'},
        {label: '列9', prop: 'column9'},
      ],

    };
  },
  methods: {
    spanMethod({row, column, rowIndex, columnIndex}) {
      console.log('{row,column,rowIndex,columnIndex}:', {row, column, rowIndex, columnIndex})
      if (row.isParent) {
        return [1, 11]
      }
    },
  },
}