vue2 el-table展开行

 在table加

:row-key="getRowKeys"
:expand-row-keys="expands"
 @expand-change="expandChange"


  <el-table-column type="expand" :loading="loading" element-loading-spinner="el-icon-loading">
                  <template slot-scope="props">
                    <div style="margin-left: 100px" v-loading="loading" element-loading-spinner="el-icon-loading">
                      <el-descriptions :column="1">
                        <el-descriptions-item v-for="item in detailInfoItems" :key="item.key" :label="item.title"
                                              style="width: 120px!important;">
                          <div class="formatted-text" v-if="item.key=='session_condition'">{{ item.value }}</div>
                          <div class="formatt-text" v-else>{{ item.value }}</div>
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </template>
                </el-table-column>



private expands = [];

private getRowKeys(row: any) {
    return row.id;
  }

  private expandChange(id: any) {
    this.loading = true
    if (this.expands.includes(id)) {
      this.expands = this.expands.filter((val) => val !== id);
    } else {
      if (this.expands.length != 0) {
        this.expands.splice(0, this.expands.length);
        this.expands.push(id);
      } else {
        this.expands.push(id);
      }
    }
    this.handleFeatureDetial(id)
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您想要实现在 el-table 的每一中上传文件,需要在 el-table 的列中添加一个自定义的列,用于上传文件。具体实现步骤如下: 1. 在 el-table 的 columns 中添加自定义列,例如: ```html <el-table :data="tableData" :columns="columns"> <template #upload> <el-upload class="upload-demo" :action="uploadUrl" :show-file-list="false" :on-success="handleUploadSuccess" > <el-button size="mini" type="primary">上传文件</el-button> </el-upload> </template> </el-table> ``` 注意,这里使用了 template 标签,并指定了 #upload 作为该模板的名称。 2. 在 el-table 的 columns 中,添加一个自定义的列,例如: ```js columns: [ { label: '姓名', prop: 'name', }, { label: '年龄', prop: 'age', }, { label: '上传文件', align: 'center', width: 120, template: '#upload', }, ], ``` 这里需要注意的是,在自定义列中,我们使用了 template 属性,并指定为之前定义的模板名称 #upload。 3. 在 el-table 的数据中,添加一个上传文件的属性,例如: ```js tableData: [ { name: '张三', age: 18, file: {}, }, { name: '李四', age: 20, file: {}, }, ], ``` 这里添加的 file 属性就是用于保存上传的文件对象。 4. 在 handleUploadSuccess 方法中,将上传成功的文件对象保存到对应的数据中,例如: ```js handleUploadSuccess(response, file, fileList) { const index = this.tableData.findIndex(item => item.name === file.name); this.tableData[index].file = file; }, ``` 这里通过文件名查找到对应的数据项,然后将上传的文件对象保存到该数据项的 file 属性中。 通过以上步骤,就可以实现在 el-table 的每一中上传文件的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值