背景:因为element里面的扩展行支持多行展示扩展行,但接到了需求,只能展示一行,如:第一行扩展,点击第二行的时候,第一行收起,第二行展开。同时改成点击行展示扩展内容

<el-table
        :data="eventTableData"
        style="width: 100%"
        @cell-click="clickTable"
        ref="refTable"
        @selection-change="handleSelectionChange"
        @expand-change="expandSelect"
       >
<el-table-column type="expand"  width="0px" label="扩展">

</el-table-column>

</el-table>

data:{

eventTableData:[],

expands:[],

}

methods:{

clickTable:function(row, column, cell, event){//展开事件日志列表
    if(cell.cellIndex!=3 && cell.cellIndex!=10){
        this.$refs.refTable.toggleRowExpansion(row);
    }
    this.getnoTicketReason("",row.businessType);
},
handleSelectionChange:function (val) {
console.log(val)
},
expandSelect:function (row, expandedRows) {
    var that = this
    if (expandedRows.length>1) {
        that.expands = []
        if (row) {
            that.expands.push(row);
        }
        this.$refs.refTable.toggleRowExpansion(expandedRows[0]);
    } else {
        that.expands = [];
    }
},

}

 

GitHub 加速计划 / eleme / element
15
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐