zoukankan      html  css  js  c++  java
  • 使用element-ui中table expand展开行控制显示隐藏,隐藏小箭头列的方法,之展开一行内容

    涉及知识点:

      1、不点击小箭头,点击其他列中的某个按钮展开行内容。

      2、隐藏小箭头列(既然我们点击表格其他单元格展开行内容了,一般就不需要小箭头列了)

      3、只展开一行内容

    先直接上代码:

     1 <template>
     2   <el-table ref="table" border stripe highlight-current-row :data="tableData5" style=" 800px;">
     3     <el-table-column label="商品 ID" prop="id" width="100">
     4     </el-table-column>
     5     <el-table-column label="商品名称" prop="name">
     6     </el-table-column>
     7     <el-table-column label="描述" prop="desc">
     8     </el-table-column>
     9     <el-table-column label="操作" width="100">
    10       <template slot-scope="scope">
    11         <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
    12       </template>
    13     </el-table-column>
    14     <el-table-column type="expand" width="1">
    15       <template slot-scope="props">
    16         <el-form label-position="left" inline class="demo-table-expand">
    17           <el-form-item label="商品名称">
    18             <span>{{ props.row.name }}</span>
    19           </el-form-item>
    20         </el-form>
    21       </template>
    22     </el-table-column>
    23   </el-table>
    24 </template>
    25 
    26 <script>
    27 export default {
    28   data() {
    29     return {
    30       tableData5: [{
    31         id: '1',
    32         name: '好滋好味鸡蛋仔1',
    33         desc: '荷兰优质淡奶,奶香浓而不腻1',
    34       }, {
    35         id: '2',
    36         name: '好滋好味鸡蛋仔2',
    37         desc: '荷兰优质淡奶,奶香浓而不腻2',
    38       }, {
    39         id: '3',
    40         name: '好滋好味鸡蛋仔3',
    41         desc: '荷兰优质淡奶,奶香浓而不腻3',
    42       }, {
    43         id: '4',
    44         name: '好滋好味鸡蛋仔4',
    45         desc: '荷兰优质淡奶,奶香浓而不腻4',
    46       }]
    47     };
    48   },
    49   methods: {
    50     toogleExpand(row) {
    51       let $table = this.$refs.table;
    52       $table.toggleRowExpansion(row)
    53     }
    54   }
    55 }
    56 </script>

    我们一般会点击按钮去展开查看详情,所以我们替换箭头为“查看详情”按钮,通过toggleRowExpansion方法展开合闭expand。效果如图:

    自己项目中遇到的问题是想要隐藏小箭头列,无意间发现这篇文章,原来只需要设置 width="1" 就行了。

    因为我设置了<el-table-column type="expand" width="1"></el-table-column> 会多出1px的边距,所以我们可以再在最外层放一个空的div,设置样式overflow:hidden;
    再设置此table的样式margin-left:1px;好了,完美实现。(自己的项目中没有遇到1px影响效果的情况,可以直接设置宽度为1px即可)

    放上项目最终的效果图,无多出的1px边框。

    同样的,toggleRowExpansion方法也支持手风琴效果,点击展开自己的同时关闭原先除自己之外的已打开的展开项,实现手风琴,修改methods→toogleExpand方法:

    1 toogleExpand(row) {
    2    let $table = this.$refs.table;
    3    this.tableData5.map((item) => {
    4      $table.toggleRowExpansion(item, false)
    5    })
    6    $table.toggleRowExpansion(row)
    7  }

    table的toggleRowExpansion方法可以传两个参数,第一个参数传row,第二个参数传false,意思是合闭expand。我们把每行的expand关闭一次,再把对应的行打开,这样就实现了手风琴效果了。

    新的问题,当我们点击打开了手风琴,每次都至少有一个是打开状态的,这样很明显是bug了,我们做一下让已打开行的expand合闭。

    bug原因:当我们点击已打开的expand想关闭它时,相当于走了一遍$table.toggleRowExpansion(row, false)后,又走了一遍$table.toggleRowExpansion(row),所以这行的expand又被打开了。我们把“合闭/打开“的expand对应的行去除“合闭“操作。

    修复toogleExpand方法:

    1 toogleExpand(row) {
    2    let $table = this.$refs.table;
    3   this.tableData5.map((item) => {
    4      if (row.id != item.id) {
    5        $table.toggleRowExpansion(item, false)
    6     }
    7    })
    8    $table.toggleRowExpansion(row)
    9  }

    点击展开内容时,遍历外层数组,找到除了当前点击的展开项之外的行,关闭除自己之外的已展开项,然后展开或者关闭当前点击的行。

    嗯,就酱啦~

    参考文章:https://www.cnblogs.com/jiajialove/p/11477679.html

     

     

  • 相关阅读:
    bzoj3505 数三角形 组合计数
    cogs2057 殉国 扩展欧几里得
    cogs333 荒岛野人 扩展欧几里得
    bzoj1123 BLO tarjan求点双连通分量
    poj3352 road construction tarjan求双连通分量
    cogs1804 联合权值 dp
    cogs2478 简单的最近公共祖先 树形dp
    cogs1493 递推关系 矩阵
    cogs2557 天天爱跑步 LCA
    hdu4738 Caocao's Bridge Tarjan求割边
  • 原文地址:https://www.cnblogs.com/smile-fanyin/p/13673198.html
Copyright © 2011-2022 走看看