ElementUI table标签展开行

末蓝、 2023-01-15 14:30 217阅读 0赞

# 一、概述 #

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

官方示例：

test.vue

<template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{
          { props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{
          { props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{
          { props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{
          { props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{
          { props.row.category }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{
          { props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{
          { props.row.desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="商品 ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="desc">
        </el-table-column>
      </el-table>
    </template>
    
    <style>
      .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
      }
    </style>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              id: '12987122',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987123',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987125',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987126',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }]
          }
        }
      }
    </script>

刷新页面，效果如下：

![a0337c5395299936a21d6019d70b50f8.png][]

# 二、全部展开 #

增加属性:default-expand-all="true"

test.vue完整代码：

<template>
      <el-table
        :data="tableData" :default-expand-all="true"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{
          { props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{
          { props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{
          { props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{
          { props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{
          { props.row.category }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{
          { props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{
          { props.row.desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="商品 ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="desc">
        </el-table-column>
      </el-table>
    </template>
    
    <style>
      .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
      }
    </style>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              id: '12987122',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987123',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987125',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987126',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }]
          }
        }
      }
    </script>

刷新页面，效果如下：

![d5406f9bd22c74a1a84f5e938d0a1eef.png][]

# 三、指定某一行默认展示 #

需要增加属性

:row-key="getRowKeys" :expand-row-keys="expands"

比如：指定第二行，默认展开

test.vue完整代码：

<template>
      <el-table
        :data="tableData" :row-key="getRowKeys"
        :expand-row-keys="expands"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{
          { props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{
          { props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{
          { props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{
          { props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{
          { props.row.category }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{
          { props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{
          { props.row.desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="商品 ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="desc">
        </el-table-column>
      </el-table>
    </template>
    
    <style>
      .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
      }
    </style>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              id: '12987122',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987123',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987125',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987126',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }],
            // 获取row的key值
            getRowKeys(row) {
              return row.id;
            },
            // 要展开的行，数值的元素是row的key值
            expands: []
          }
        },
        mounted() {
          // 在这里你想初始化的时候展开哪一行都可以了
          this.expands.push(this.tableData[1].id);
        }
      }
    </script>

刷新页面，效果如下：

![45a46219623f7516fbc9ad9178a0d429.png][]

# 四、点击某行，默认展开 #

现有一个需求，展开某行后，再次刷新页面后，默认展开刚才点击的那一行。

需要添加属性 @current-change

这里还使用了localStorage用来存储，点击过的行id。实际生产环境，可以使用vuex来存储点击的id。

test.vue完整代码如下：

<template>
      <el-table
        :data="tableData" :row-key="getRowKeys"
        :expand-row-keys="expands"
        @current-change="toggleRowExpansion"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{
          { props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{
          { props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{
          { props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{
          { props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{
          { props.row.category }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{
          { props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{
          { props.row.desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="商品 ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="desc">
        </el-table-column>
      </el-table>
    </template>
    
    <style>
      .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
      }
    </style>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              id: '12987122',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987123',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987125',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }, {
              id: '12987126',
              name: '好滋好味鸡蛋仔',
              category: '江浙小吃、小吃零食',
              desc: '荷兰优质淡奶，奶香浓而不腻',
              address: '上海市普陀区真北路',
              shop: '王小虎夫妻店',
              shopId: '10333'
            }],
            // 获取row的key值
            getRowKeys(row) {
              return row.id;
            },
            // 要展开的行，数值的元素是row的key值
            expands: []
          }
        },
        mounted() {
          console.log('check_id',localStorage.getItem('check_id'))
          // 默认将check_id添加到列表中，用于刷新默认展开指定的行
          this.expands.push(localStorage.getItem('check_id'));
        },
        methods:{
          toggleRowExpansion(row){
            // console.log("toggleRowExpansion",row)
            // 清空数组
            this.expands = [];
            // 添加指定的id
            this.expands.push(row.id);
            // 保存点击的id
            localStorage.setItem('check_id',row.id)
          },
        }
      }
    </script>

刷新页面，点击第3行，然后刷新页面，效果如下：

![c9674ce2d5fbe6810cf3b543b043d94b.png][]

本文参考链接：[https://segmentfault.com/q/1010000008981772][https_segmentfault.com_q_1010000008981772]

[a0337c5395299936a21d6019d70b50f8.png]: /images/20221022/f20af4c8d7d440f7a1d3d101e62d282a.png
[d5406f9bd22c74a1a84f5e938d0a1eef.png]: /images/20221022/364e5888b6ea4165ad6bc4926112d526.png
[45a46219623f7516fbc9ad9178a0d429.png]: /images/20221022/1e779ffdbb9c4c6b8a5a8f566c3a248a.png
[c9674ce2d5fbe6810cf3b543b043d94b.png]: /images/20221022/7e93d4f28a2946abb9d0725cd8945392.png
[https_segmentfault.com_q_1010000008981772]: https://segmentfault.com/q/1010000008981772