美文网首页
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