Vue - Element el-table 行的展开与折叠

GitHub Demo 地址

在线预览

效果图

方式一效果图

方式二效果图

要点

使用el-table的span-method方法配合css样式实现展开与折叠

方式一代码

<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" :span-method="arraySpanMethod" row-key="id" border>

      <el-table-column type="expand">
        <template slot-scope="props">

          <el-table class="table-in-table" :show-header="false" :data="props.row.datas" style="width: 100%;" row-key="id" :span-method="arraySpanMethod" border>

            <el-table-column type="expand">
              <template slot-scope="props2">
                <el-table class="table-in-table" :data="props2.row.datas" style="width: 100%;" row-key="id" border>
                  <el-table-column prop="date" label="下单日期" width="180" />
                  <el-table-column prop="type" label="单据类型" width="180" />
                  <el-table-column prop="status" label="状态" />
                  <el-table-column label="操作" width="120">
                    <template>
                      <el-button type="text" size="small">移除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>

            </el-table-column>
            <el-table-column prop="applyNo" label="申请单号" width="132.2" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="address" label="地址" />
          </el-table>

        </template>
      </el-table-column>

      <el-table-column prop="applyNo" label="申请单号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作" width="120">
        <template>
          <el-button type="text" size="small">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      tableHeight: 170,
      tableLoading: false,
      tableData: []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.tableData = [
        {
          id: 1,
          applyNo: '202004291234',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          applyNo: '202004291235',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          applyNo: '202004291236,202004291237',
          name: '王五',
          address: '上海市普陀区金沙江路 1519 弄',
          datas: [
            {
              id: 31,
              applyNo: '202004291236',
              name: '王小五',
              address: '上海市普陀区金沙江路 1519 弄',
              datas: [
                {
                  id: 31,
                  date: '2016-05-01',
                  type: '类型1',
                  status: '已发货'
                },
                {
                  id: 32,
                  date: '2016-05-01',
                  type: '类型2',
                  status: '未发货'
                }
              ]
            },
            {
              id: 32,
              applyNo: '202004291237',
              name: '赵小六',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 4,
          applyNo: '202004291238',
          name: '赵六',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!row.datas) {
        if (columnIndex === 0) {
          return [0, 0]
        } else if (columnIndex === 1) {
          return [1, 2]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  ::v-deep {
    .el-table th {
      background: #ddeeff;
    }
    .el-table__expanded-cell {
      border-bottom: 0px;
      border-right: 0px;
      padding: 0px 0px 0px 47px;
    }
  }
  .table-in-table {
    border-top: 0px;
  }
}
</style>

要点

使用el-table的row-class-name方法配合css样式实现展开与折叠

方式二代码

<template>
  <div class="app-container">

    <el-table :data="tableData" :stripe="true" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-class-name="rowClassName" border>

      <el-table-column type="expand">
        <template slot-scope="props">

          <el-table :data="props.row.datas" :stripe="true" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-class-name="rowClassName" border>

            <el-table-column type="expand">
              <template slot-scope="props2">
                <el-table :data="props2.row.datas" :stripe="true" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-class-name="rowClassName" border>
                  <el-table-column prop="date" label="下单日期" width="180" />
                  <el-table-column prop="type" label="单据类型" width="180" />
                  <el-table-column prop="status" label="状态" />
                </el-table>
              </template>

            </el-table-column>
            <el-table-column prop="applyNo" label="申请单号" width="132.2" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="address" label="地址" />
          </el-table>

        </template>
      </el-table-column>

      <el-table-column prop="applyNo" label="申请单号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作" width="120">
        <template>
          <el-button type="text" size="small">移除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      tableHeight: 170,
      tableLoading: false,
      tableData: []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.tableData = [
        {
          id: 1,
          applyNo: '202004291234',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
          datas: []
        },
        {
          id: 2,
          applyNo: '202004291235',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄',
          datas: []
        },
        {
          id: 3,
          applyNo: '202004291236,202004291237',
          name: '王五',
          address: '上海市普陀区金沙江路 1519 弄',
          datas: [
            {
              id: 31,
              applyNo: '202004291236',
              name: '王小五',
              address: '上海市普陀区金沙江路 1519 弄',
              datas: [
                {
                  id: 31,
                  date: '2016-05-01',
                  type: '类型1',
                  status: '已发货'
                },
                {
                  id: 32,
                  date: '2016-05-01',
                  type: '类型2',
                  status: '未发货'
                }
              ]
            },
            {
              id: 32,
              applyNo: '202004291237',
              name: '赵小六',
              address: '上海市普陀区金沙江路 1519 弄',
              datas: []
            }
          ]
        },
        {
          id: 4,
          applyNo: '202004291238',
          name: '赵六',
          address: '上海市普陀区金沙江路 1516 弄',
          datas: []
        }
      ]
    },
    // 设置表头样式
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return { textAlign: 'center', background: '#E6E6E6' }
    },
    // 设置表内容样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return { textAlign: 'center' }
    },
    // 设置row样式
    rowClassName({ row, rowIndex }) {
      console.log(JSON.stringify(row))
      const data = row
      const res = []
      if (data.datas && data.datas.length > 0) {
        res.push('row-expand-has')
        return res
      } else {
        res.push('row-expand-unhas')
        return res
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .row-expand-unhas .el-table__expand-column {
    pointer-events: none;
  }
  .row-expand-unhas .el-table__expand-column .el-icon {
    visibility: hidden;
  }
}
</style>