博客

按钮控制 点击全部展开 再次点击 全部关闭

<button class="table_btn ml10" @click="handleExpand"><i class="iconfont" :class="isExpand?'icon-add_bd':'icon-reduce_bd'"></i> {{isExpand?'全部折叠':'全部展开'}}</button>

表格代码

<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>

data数据

data() {
	return {
        isExpand:true,//全部展开
        tableData:[]
	}
},
mountend:{
    let self = this;
    self.$nextTick(()=>{//可以axios拿到数据调用 默认全部展开
         self.forArr(self.tableData,self.isExpand)
    })
},
methods:{
    handleExpand() {
        this.isExpand = !this.isExpand
        this.$nextTick(() => {
            this.forArr(this.tableData, this.isExpand)
        })
    },
    // 遍历
    forArr(arr, isExpand) {
        arr.forEach(i => {
            this.$refs.multipleTable.toggleRowExpansion(i, isExpand)
            if (i.children) {
                this.forArr(i.children, isExpand)
            }
        })
    },
}