美文网首页
el-table 树形结构选中与取消

el-table 树形结构选中与取消

作者: CodeYang | 来源:发表于2022-03-21 15:05 被阅读0次
     <!-- 表格 -->
    <el-table ref="table"
              :data="data.tableData"
              stripe highlight-current-row border
              row-key="id"
              :default-expand-all="data.expands"
              table-layout="auto"
              @select="selectSingleRow"
              @select-all="selectAll"  
    
    //页面数据
    let data = reactive({
        isSelectedAllTableData:false, //是否选择全部表格数据
        tableData: [], //表格数据 树形结构
        expands: true,  //标识表格展开折叠
    })
    //表格树的展开闭合
    function openTableTree(value) {
        data.expands = value
        tableRowExpansion_forAll(data.tableData,value)
    }
    
    //表格展开与闭合
    function tableRowExpansion_forAll(data,value){
        data.forEach(item=>{
            proxy.$refs.table.toggleRowExpansion(item,value);
            if(item.children != undefined && item.children != null){
                tableRowExpansion_forAll(item.children,value);
            }
        })
    }
    
    //全选、取消全选
    function selectAll () {
        data.isSelectedAllTableData = !data.isSelectedAllTableData
        selectTableTree(data.tableData,data.isSelectedAllTableData)
    }
    
    //选中某一行数据
    function selectSingleRow(selection, row){
        //是否是选中操作
        const isSelected = selection.includes(row)
        //处理选中与取消问题
        selectTableTree([row],isSelected)
    }
    
    //表格选中全部 与 取消选择全部
    function selectTableTree(data,isSelected){
        data.forEach(item=>{
            proxy.$refs.table.toggleRowSelection(item,isSelected);
            if(item.children != undefined && item.children != null){
                selectTableTree(item.children,isSelected);
            }
        })
    }
    

    相关文章

      网友评论

          本文标题:el-table 树形结构选中与取消

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