首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-ui中table表格的折叠和隐藏

element-ui中table表格的折叠和隐藏方式

2023-10-18 09:12:15 作者：今天你码了吗

这篇文章主要介绍了element-ui中table表格的折叠和隐藏方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element-ui中table表格的折叠和隐藏

el-table的折叠展开

使用elment-ui的el-table组件做表格的折叠和展开使用 default-expand-all属性通过click控制它为true或false来完成折叠展开但是却没有效果！！！

通过查资料发现需要这样来写

<el-table
        v-if="refreshTable"
        :header-cell-style="{background:'#f4f3f9',color:'#606266'}"
        :data="deptList"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        :default-expand-all="Expand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren' 
     >

 -------------数据设置
  data() {
   return {
   	Expand: true,
      refreshTable: true,   
   }
  }

-------------鼠标点击事件
 /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false

      this.Expand = !this.Expand

      this.$nextTick(() => {
        this.refreshTable = true
      })
    },

设置v-if table的显示和隐藏设置default-expand-all 两个都要设置向上面那样最后成功了也不知道具体原理先这样记住！

最近发现之前那个方法有bug 很不好用又找到一个简单好用得

  this.$refs.table..toggleRowExpansion(this.tableData[0]) // 全部折叠

直接拿到table得dom元素，然后调用element-ui的table表格得一个方法toggleRowExpansion就可以实现展开和折叠了

实现element-ui表格el-table展开行

<template>  <el-table :data="tableData" style="width: 100%" @row-click="rowClick" :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="expandChange" ref="tableList">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="right" inline class="demo-table-expand" align="right">
          <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店"+'<br>'+"asfdasfafasdfasdfas",
          shopId: "10333",
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987125",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987126",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
      ],
      expands: []
    };
  },
  methods: {
    rowClick(row){//点击行时展开收起
      this.$refs.tableList.toggleRowExpansion(row);
    },
    expandChange(row,expandedRows){//
      let that = this;
      if(expandedRows.length){//此时展开
        that.expands = [];
        if(row){
          that.expands.push(row.id);
        }
      }else{//折叠
        that.expands = [];
      }
    },
    getRowKeys(row){//行数据的key，用于优化table的渲染
      return row.id;
    }
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style><style>//在添加scoped时未生效.demo-table-expand .label{  width:150px;  color: #99a9bf;}
</style>

row-click: 当某一行点击时触发
row-key: 行数据的key,用于优化talbe的渲染
expand-row-keys: 可通过这个属性设置表格的当前展开行(必需row-key属性)
expand-change: 用于某一行点击展开或者关闭时触发(展开行时，第二个属性为expandedRows，关闭行时，第二个属性为expanded)

后续问题

列表中存在操作按钮列，点击操作按钮时，同时会触发row-click

问题解决

<el-button type="warning" size="mini" circle icon="el-icon-question" @click.stop="diagnose"></el-button>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。