首页 > 其他 > 详细

vue elementui table表格展开行每次只展开一行

时间:2020-07-17 15:08:05      阅读:58      评论:0      收藏:0      [点我收藏+]

需求:表格展开行每次只展开一行

技术分享图片

 

                <template>
                  <el-table
                    :row-key="getRowKeys"
                    :expand-row-keys="expands"
                    @expand-change="expandSelect"
                    :data="neatingTableData"
                    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 v-for="item in props.row.childreds" :key="item.id">
                            <div>
                              <i style="color:#409EFF;margin-left: 30px;" class="el-icon-tickets"></i>
                              <el-button style="margin-left: 10px" @click="handleClick(scope.row)" type="text">{{ item.name +".pdf"}}</el-button>
                            </div>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="归档目录"
                      width="250">
                      <template slot-scope="scope">
                        <i class="el-icon-folder-opened"></i>
                        <span style="margin-left: 10px">{{scope.row.name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="创建日期"
                      width="100" align=center>
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="备注" align=center>
                    </el-table-column>
                  </el-table>
                  <div class="fileNameStyle">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item v-for="item in wenjianming" :key="item.id">
                        <div>
                          <i style="color:#409EFF;" class="el-icon-tickets"></i>
                          <el-button style="margin-left: 10px" @click="handleClick()" type="text">{{ item.name +".pdf"}}</el-button>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>
                </template>
  export default {
    data() {
      return {
            expands: [],
            getRowKeys(row) {
              return row.id
             },
        neatingTableData:[{
            id:12,
            name: 行政许可决定书,
            date: 2020-7-9,
            address: ,
            childreds:[
              {
                id:1,
                name: 行政许可决定书,
              },
              {
                id:2,
                name: 行政许可书,
              }
            ]
          }, {
            id:13,
            name: 行政许可申请书,
            date: 2020-7-9,
            address: ,
            childreds:[
              {
                id:3,
                name: 行政许可决定书,
              }
            ]
          }, {
            id:14,
            name: 行政许可申请材料收件凭证,
            date: 2020-7-9,
            address: ,
            childreds:[
              {
                id:4,
                name: 行政许可决定书,
              },
              {
                id:5,
                name: 行政许可书,
              }
            ]
          }
        ],
      }
    },
    methods:{
      // 折叠面板每次只能展开一行
      expandSelect(row, expandedRows) {
        // console.log(‘expandedRows‘, expandedRows)
        // console.log(‘row‘, row)
        var that = this
        if (expandedRows.length) {
          that.expands = []
          if (row) {
            that.expands.push(row.id)// 每次push进去的是每行的ID
          }
        } else {
          that.expands = []// 默认不展开
        }
        // console.log(‘that.expands‘, that.expands)
      },
    }
}
row-key:【function】行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function
expand-row-keys:【Array 】 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。
expand-change:【事件Table Events】当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded)

 https://www.cnblogs.com/wangliko/p/11046090.html

vue elementui table表格展开行每次只展开一行

原文:https://www.cnblogs.com/duhui/p/13328573.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!