<!-- 表格 -->
<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);
}
})
}
网友评论