Go语言视频零基础入门到精通

admin

element UI里的表格里，

1. type="expand"的话，所有行都有展开的选项，然而实际中有些行根据判断不需要展开，而element目前对这个问题还不是很友好，现在有个可以通过CSS解决的方法来解决这个问题。

复制代码

  
HTML

1. <el-table :data="tableData5" style="width: 100%" :row-class-name="setClassName">
2.     <el-table-column type="expand">...</el-table-column>
3. </el-table>

复制代码

  

1. js

复制代码

1. data() { return { tableData5: [{ id: "12987122", name: "好滋好味鸡蛋仔", category: "江浙小吃、小吃零食", desc: "荷兰优质淡奶，奶香浓而不腻", address: "上海市普陀区真北路", shop: "王小虎夫妻店", shopId: "10333", expand: true }, { id: "12987123", name: "好滋好味鸡蛋仔", category: "江浙小吃、小吃零食", desc: "荷兰优质淡奶，奶香浓而不腻", address: "上海市普陀区真北路", shop: "王小虎夫妻店", shopId: "10333", expand: false }, { id: "12987125", name: "好滋好味鸡蛋仔", category: "江浙小吃、小吃零食", desc: "荷兰优质淡奶，奶香浓而不腻", address: "上海市普陀区真北路", shop: "王小虎夫妻店", shopId: "10333", expand: true }, { id: "12987126", name: "好滋好味鸡蛋仔", category: "江浙小吃、小吃零食", desc: "荷兰优质淡奶，奶香浓而不腻", address: "上海市普陀区真北路", shop: "王小虎夫妻店", shopId: "10333", expand: false }] } }, methods:{ setClassName({row, index}){ // 通过自己的逻辑返回一个class或者空
2.         return row.expand ? "expand" : ""; }, }

复制代码

  
css

1. .expand .el-table__expand-column .cell { display: none;
2. }

复制代码

  
或者另一种方法~
html

1. <el-table :data="tableData5" style="width: 100%" :row-class-name="getClassName">
2.     <el-table-column type="expand">...</el-table-column>
3. </el-table>

复制代码

css

1. getRowClass(row, index) {
2.     let res = []
3.     if (!row.children)//即改行没有子元素时，添加row-expand-cover类
4.       res.push("row-expand-cover")
5.     /* if (row.operate == 2)
6.       res.push("hide-row")
7.     return res.join(" ") */
8.   }

复制代码

style

1. .row-expand-cover .el-table__expand-column .el-icon{ visibility:hidden;
2. }

复制代码

  
上面两种方法效果是一样的，只不过第一种通过display：none将元素的显示设为无，即在网页中不占任何的位置。而第二种visibility: hidden是将元素隐藏，但是在网页中该占的位置还是占着，具体用哪个，看个人需求~
  
恩 ，就酱～