«

Element Table常用设置:展开行满足条件展开

时间:2024-1-24 15:45     作者:yang     分类: 项目


完整实现

<el-table :data="menuList" style="width: 100%" :row-class-name="isShowIcon">
  <el-table-column type="expand">
    <template slot-scope="props" v-if="props.row.menuList">
      <el-table :data="props.row.menuList" :row-class-name="isShowIcon" :show-header=false>
        <el-table-column label="菜单名称" prop="menuName"></el-table-column>
        <el-table-column label="请求地址"  prop="url"></el-table-column>
        <el-table-column label="可见"  prop="isHide"></el-table-column>
      </el-table>
    </template>
  </el-table-column>
  <el-table-column label="菜单名称" prop="menuName"></el-table-column>
  <el-table-column label="请求地址"  prop="url"></el-table-column>
  <el-table-column label="可见"  prop="isHide"></el-table-column>
</el-table>
<script>
export default {
  data() {
    return {
      tableData5: [
        {
          id: "1",
          name: "商品1",
          address: "云南",
          type:3,
          child:[
              {
                comp_name1:'一行商品1',
                comp_name2:'一行商品2',
              },
              {
                comp_name1:'一行商品1',
                comp_name2:'一行商品2',
              },
          ]
        },
        {
          id: "2",
          name: "商品2",
          address: "西藏",
          type:2,
          child:[
              {
                comp_name1:'二行商品1',
                comp_name2:'二行商品2',
              },
              {
                comp_name1:'二行商品1',
                comp_name2:'二行商品2',
              }
          ]
        },
        {
          id: "3",
          name: "商品3",
          address: "黑龙江",
          type:4,
          child:[
              {
                comp_name1:'三行商品1',
                comp_name2:'三行商品2',
              },
              {
                comp_name1:'三行商品1',
                comp_name2:'三行商品2',
              },
          ]
        },
        {
          id: "4",
          name: "商品4",
          address: "海南",
          type:1,
          child:[
              {
                comp_name1:'四行商品1',
                comp_name2:'四行商品2',
              }
          ]
        },
        {
          id: "5",
          name: "商品5",
          address: "重庆",
          type:0,
          child:[]
        }
      ],
      expands:[]
    };
  },
  filters:{
      TypeFilter(val){
        if(val==1){
            return '食品'
        }else if(val==2){
            return '纺织'
        }else if(val==3){
            return '教育'
        }else if(val==4){
            return '家居'
        }else{
            return '未知'
        }
      }
  },
  methods:{
      editInfo(){  //编辑

      },
      isShowIcon(row, index){
        if(row.row.child.length>0)
            return ''
        else
            return 'hiderow'
      },
      rowClick(row, event, column) {   //控制展开行
        var NoIndex = column.type.indexOf("expand");
        if (NoIndex == 0 && row.child.length <= 0) {
            this.expands = [];
            return;
        }
        if (row.child.length > 0) {   
            Array.prototype.remove = function(val) {
            let index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
            };
            if (this.expands.indexOf(row.id) < 0) {  //确保只展开一行
                this.expands.shift();
                this.expands.push(row.id);
            } else {
                this.expands.remove(row.id);
            }
        } else {
            return;
        }
    },
  }
};
</script>
<style>
    #table2 .el-table__expanded-cell{
      padding:0 !important;
      border-bottom: none;
    }
    .hiderow .el-table__expand-column .el-icon {
      visibility: hidden;
    }
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
    .tabBg {
      background: #fafafa !important;
    }
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
</style>

重要部分

<el-table :data="menuList" style="width: 100%" :row-class-name="isShowIcon">
  <el-table-column type="expand">
    <template slot-scope="props" v-if="props.row.menuList">
      <el-table :data="props.row.menuList" :row-class-name="isShowIcon" :show-header=false>
        <el-table-column label="菜单名称" prop="menuName"></el-table-column>
        <el-table-column label="请求地址"  prop="url"></el-table-column>
        <el-table-column label="可见"  prop="isHide"></el-table-column>
      </el-table>
    </template>
  </el-table-column>
  <el-table-column label="菜单名称" prop="menuName"></el-table-column>
  <el-table-column label="请求地址"  prop="url"></el-table-column>
  <el-table-column label="可见"  prop="isHide"></el-table-column>
</el-table>
.hiderow .el-table__expand-column .el-icon {
  visibility: hidden;
}
//层级不够
::v-deep .hiderow .el-table__expand-column .cell .el-icon {
  visibility: hidden;
}
methods:{
  isShowIcon(row, index){
  if(row.row.menuList != null)
    return ''
  else
    return 'hiderow' 
},

Element Table常用设置:展开行满足条件展开

版权所有:微4e
文章标题:Element Table常用设置:展开行满足条件展开
除非注明,文章均为 微4e 原创,请勿用于任何商业用途,禁止转载

推荐阅读:


扫描二维码,在手机上阅读