zoukankan      html  css  js  c++  java
  • vue elementui table表格展开行每次只展开一行

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

                    <template>
                      <el-table
                        :row-key="getRowKeys"
                        :expand-row-keys="expands"
                        @expand-change="expandSelect"
                        :data="neatingTableData"
                        style=" 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

  • 相关阅读:
    用django2.1开发公司官网(上)
    vue常用手册
    xadmin+django2.0删除用户报错,get_deleted_objects() takes 3 positional arguments but 5 were given
    Vue+koa2开发一款全栈小程序(9.图书详情页)
    Vue+koa2开发一款全栈小程序(8.图书列表页)
    Vue+koa2开发一款全栈小程序(7.图书录入功能)
    Vue+koa2开发一款全栈小程序(6.个人中心)
    Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化)
    java中基本类型double和对象类型Double
    vb中的除法
  • 原文地址:https://www.cnblogs.com/duhui/p/13328573.html
Copyright © 2011-2022 走看看