美文网首页
vue element table expand 扩展行点击行展

vue element table expand 扩展行点击行展

作者: shenyoujian | 来源:发表于2019-12-26 11:21 被阅读0次

    背景:因为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 = [];
    }
    },

    }
    https://blog.csdn.net/fox_233/article/details/86529227

    相关文章

      网友评论

          本文标题:vue element table expand 扩展行点击行展

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