美文网首页
element-ui table点击其中一行展开折叠子项

element-ui table点击其中一行展开折叠子项

作者: 团猫咪爱吃玉米 | 来源:发表于2019-01-25 19:01 被阅读13次
    • element默认的table仅支持点击左侧的箭头展开折叠当前项,如图所示:


      50980a41a9ba53b35b4a5f82b4cb344.png
    • 而实际的需求是要点击其中一行展开折叠当前项。
    • 用到了Table Events的row-click事件:当某一行被点击时会触发该事件
    • 和Table Methods的toggleRowExpansion方法:用于可展开表格,切换某一行的展开状态。接受两个参数row, expanded
    <el-table
        :data="tableData"
        ref="refTable"
        style="width: 100%"
     @row-click="expandChange"
    >
    </el-table>
    
    expandChange(row,index,e){
          this.$refs.refTable.toggleRowExpansion(row)
     }
    

    相关文章

      网友评论

          本文标题:element-ui table点击其中一行展开折叠子项

          本文链接:https://www.haomeiwen.com/subject/rlxvjqtx.html