✨(component): table 复杂表头, 完成 body 平铺, header 的合并待处理
This commit is contained in:
		
							parent
							
								
									8d43f28fb3
								
							
						
					
					
						commit
						8c9078b0fc
					
				@ -89,15 +89,55 @@ const slots = slot.default && slot.default();
 | 
			
		||||
const allChecked = ref(false);
 | 
			
		||||
const hasChecked = ref(false);
 | 
			
		||||
const tableDataSource = ref<any[]>([...props.dataSource]);
 | 
			
		||||
const tableColumns = ref([...props.columns]);
 | 
			
		||||
const tableColumns = computed(() => {
 | 
			
		||||
  return [...props.columns];
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
const tableColumnKeys = ref(
 | 
			
		||||
  props.columns.map((item: any) => {
 | 
			
		||||
    if (item.hide != true) {
 | 
			
		||||
      return item.key;
 | 
			
		||||
const tableHeadColumns = ref<any[]>([])
 | 
			
		||||
const tableBodyColumns = ref<any[]>([])
 | 
			
		||||
 | 
			
		||||
const findFindNode = (columns: any[]) => {
 | 
			
		||||
  columns.forEach((column) => {
 | 
			
		||||
    if(column.children) {
 | 
			
		||||
      findFindNode(column.children);
 | 
			
		||||
    } else {
 | 
			
		||||
      tableBodyColumns.value.push(column);
 | 
			
		||||
    }
 | 
			
		||||
  })
 | 
			
		||||
);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
findFindNode(tableColumns.value)
 | 
			
		||||
 | 
			
		||||
const tableColumnKeys = ref<any[]>([]);
 | 
			
		||||
 | 
			
		||||
const findFindNodes = (columns: any[]) => {
 | 
			
		||||
  columns.forEach((column) => {
 | 
			
		||||
    if(column.children) {
 | 
			
		||||
      findFindNodes(column.children);
 | 
			
		||||
    } else {
 | 
			
		||||
      if(!column.hide) {
 | 
			
		||||
        tableColumnKeys.value.push(column.key);
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
findFindNodes(tableColumns.value)
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * 处理为复杂表头, 待完成
 | 
			
		||||
 * 
 | 
			
		||||
 * @param level 层级, 用于决定会被 push 到的目标数组 
 | 
			
		||||
 */
 | 
			
		||||
const findFinalNode = (level: number, columns: any[]) => {
 | 
			
		||||
  columns.forEach(column => {
 | 
			
		||||
    if(column.children) {
 | 
			
		||||
     // 设置 rowspan 
 | 
			
		||||
    } else {
 | 
			
		||||
     // 设置 colspan
 | 
			
		||||
    }
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
 | 
			
		||||
const tableExpandKeys = ref<Recordable[]>([...props.expandKeys]);
 | 
			
		||||
@ -602,7 +642,7 @@ const renderTotalRowCell = (column: any) => {
 | 
			
		||||
                  :id="id"
 | 
			
		||||
                  :index="index"
 | 
			
		||||
                  :data="data"
 | 
			
		||||
                  :columns="columns"
 | 
			
		||||
                  :columns="tableBodyColumns"
 | 
			
		||||
                  :indent-size="indentSize"
 | 
			
		||||
                  :currentIndentSize="currentIndentSize"
 | 
			
		||||
                  :tableColumnKeys="tableColumnKeys"
 | 
			
		||||
 | 
			
		||||
@ -1,13 +1,9 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
    name: "treeSelect"
 | 
			
		||||
}
 | 
			
		||||
  name: "treeSelect",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
<script lang="ts" setup></script>
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    
 | 
			
		||||
</template>
 | 
			
		||||
<template></template>
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@
 | 
			
		||||
      class="layui-quote layui-text"
 | 
			
		||||
      style="margin: 30px 0; letter-spacing: 1px"
 | 
			
		||||
    >
 | 
			
		||||
      以创造性的行为实践于人世。若能以写作为工具,为道途,先帮助自己一程,再以领悟帮助他人一程。这是一种服务 - 庆山
 | 
			
		||||
      以创造性的行为实践于人世。若能以写作为工具,为道途,先帮助自己一程,再以领悟帮助他人一程。这是一种服务
 | 
			
		||||
      - 庆山
 | 
			
		||||
    </blockquote>
 | 
			
		||||
    <fieldset class="layui-field layui-field-title">
 | 
			
		||||
      <legend style="margin-bottom: 20px; text-align: center">独立组件</legend>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user