elment ui 表格展开行点击行展开

最新推荐文章于 2023-09-26 15:49:43 发布

立勤.

最新推荐文章于 2023-09-26 15:49:43 发布

阅读量388

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_42980417/article/details/130684380

版权

标签部分

<el-table 
      v-loading="loading" 
      :data="devicePushList" 
      @selection-change="handleSelectionChange"
      element-loading-text="拼命加载中"
      ref="refTable"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      @expand-change="expandSelect"
      @row-click="clickTable"
    >
      <el-table-column type="expand" >
        <template slot-scope="props" style="background-color: red;">
          <el-form label-position="left" inline class="demo-table-expand" >
            <el-form-item label="推送数据">
              <el-image :src="JSON.parse(props.row.data)"></el-image>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
 </el-table>

关键代码:

ref="refTable"
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="expandSelect"
@row-click="clickTable"

Data

data(){
	return{
		expands: [],
		getRowKeys(row) {
		  return row.id;
		}
		....
	}
}

方法

// 点击行展开事件
clickTable(row, index, e) {
  this.$refs.refTable.toggleRowExpansion(row);
},
// 折叠面板每次只能展开一行
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 = []; // 默认不展开
  }
},