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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

要点

使用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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152