社区表格布局组件封装

需求分析

• 后台管理系统的表格布局比较单一且样式很稳定几乎没变过，但是其中有些页面写法都不同一，导致 cv 时候很容易复制到不同的版本的问题，我觉得应该需一个布局组件来规范这个写法的问题，同时也方便后期统一更改一些问题，而不用到每个页面文件去更改。
• 其中里面的高度的写法也很乱，其中的高度我觉得不应该用calc，应该去使用flex:1;height:1px来进行自适应高度，不然每次样式变化改就算了，自己算的时候有时候可能不准。
• 还有其中的搜索框折叠代码也比较冗余，大家可以直接使用v-flod指令即可，其中做了是否需要展示折叠按钮的判断。

TIP

flex 布局深入了解的文章

组件设计

• 其实现感觉就是为了约束大家的样式问题及其简化一些写法，所以我觉得可以通过将布局界面分为不同的插槽去实现。
• 如图大体可以分布为：
  • search-field： 搜索框插槽。
  • search-btns：搜索按钮的插槽。
  • content-title：表格上面内容标题。
  • tab-btns：表格的一些功能按钮。
  • tab-box:表格的渲染区域。
  • tab-footer:表格的底部区域，大多为分页器。

相关代码

• /src/components/common/lb-list-box/index.vue

<template>
	<section>
		<el-row class="lb-list-box" v-loading="tabLoading">
			<el-row class="lb-list-box_head" style="padding-bottom:0">
				<div class="search-field" v-flod>
					<slot name="search-field" />
				</div>
				<div class="search-btns">
					<el-button-group>
						<slot name="search-btns" />
					</el-button-group>
				</div>
			</el-row>
			<div>
				<slot name="content-title" />
			</div>
			<el-row :class="['lb-list-box_main', border ? 'main-border' : '']">
				<el-row class="tab-action" v-if="title || $slots['tab-btns']">
					<div class="tab-title">{{ title }}</div>
					<div class="tab-btns">
						<slot name="tab-btns" />
					</div>
				</el-row>
				<div class="tab-box">
					<slot name="tab-box" />
				</div>
				<el-row class="tab-footer" v-if="$slots['tab-footer']">
					<slot name="tab-footer"> </slot>
				</el-row>
			</el-row>
		</el-row>
	</section>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: '',
		},
		border: {
			type: Boolean,
			default: true,
		},
	},
};
</script>

<style lang="less" scoped>
.lb-list-box {
	height: 100%;
	display: flex;
	background: #fff;
	flex-direction: column;
	&_head {
		display: flex;
		padding: 1.0625em 0;
		padding-bottom: 0px;
		.search-field {
			flex: 1;
			width: 1px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding: 0;
			/deep/ & > * {
				display: flex;
				align-items: center;

				margin-bottom: 1.0625em;
				label {
					margin-left: 10px;
					font-size: 1em;
					white-space: nowrap;
				}

				.el-select,
				.el-input {
					width: 10em;
				}
			}
		}
		.search-btns {
			padding: 0;
			text-align: right;
			width: 20em;
			position: relative;
		}
	}
	&_main {
		flex: 1;
		height: 1px;
		display: flex;
		flex-direction: column;
		&.main-border {
			border: 1px solid #f0efef;
			margin: 0 0.7143em 0.7143em 0.7143em;
			border-radius: 6px;
		}
		.tab-action {
			padding: 0.7143em 0;
			.tab-title {
				float: left;
				font-weight: bold;
				padding-left: 0.7143em;
				line-height: 2.143em;
			}
			.tab-btns {
				float: right;
			}
		}
		.tab-box {
			flex: 1;
			height: 1px;
		}
		.tab-footer {
			height: 5em;
		}
	}
}
</style>

<template>
	<lb-list-box :title="title">
		<template slot="search-field"> ...... </template>
		<template slot="search-btns"> ...... </template>
		<template slot="content-title"> ...... </template>
		<template slot="tab-btns"> ...... </template>
		<template slot="tab-box"> ...... </template>
		<template slot="tab-footer"> ...... </template>
	</lb-list-box>
</template>

快捷使用

• 使用的话可以在其中添加快捷代码块生成，VScode 左上角-->文件-->首选项-->配置用户代码片段-->新建全局代码片段。
• 其中配置文件的 json 格式转换可在此网站快捷转换vscode 用户代码转换器
• 具体配置的 json

	"list-box-tem": {
		"prefix": "lb-list-box-template",
		"body": [
		  "<template>",
		  "	<lb-list-box title=\"$1\">",
		  "		<template slot=\"search-field\">$2</template>",
		  "		<template slot=\"search-btns\">$3</template>",
		  "		<template slot=\"content-title\">$4</template>",
		  "		<template slot=\"tab-btns\">$5</template>",
		  "		<template slot=\"tab-box\">$6</template>",
		  "		<template slot=\"tab-footer\">$7</template>",
		  "	</lb-list-box>",
		  "</template>",
		  "<script>",
		  "import lbListBox  from '@cms/components/common/lb-list-box';",
		  "export default {",
		  "	components: {",
		  "		lbListBox",
		  "	}",
		  "}",
		  "</script>"
		],
		"description": "list-box"
	  },
	  "list-box": {
		"prefix": "lb-list-box",
		"body": [
		  "<lb-list-box title=\"$1\">",
		  "	<template slot=\"search-field\">$2</template>",
		  "	<template slot=\"search-btns\">$3</template>",
		  "	<template slot=\"content-title\">$4</template>",
		  "	<template slot=\"tab-btns\">$5</template>",
		  "	<template slot=\"tab-box\">$6</template>",
		  "	<template slot=\"tab-footer\">$7</template>",
		  "</lb-list-box>"
		],
		"description": "list-box"
	  },
	  "lb-list-box-import":{
		"prefix": "lb-list-box-import",
		"body": [
		  "import lbListBox from '@cms/components/common/lb-list-box';",
		],
		"description": "list-box"
	  }

关于老代码迁移的问题

• 本人实测迁移一个页面大致为 3-4min，加上自测的话可能为 5 分钟。
• 更改的流程就是有时间的话就进行自己模块的更改，没时间的话可以由我来更改。
• 更改的记录验证需在这个表格进行填写 表格布局组件更改记录

TIP

注意事项：

• 首先根据以前的类名和插槽匹配填入即可，其中 search-field 中的搜索框需要用一个 div 包围，不然 label 和 input 会被换行。
• el-table 记得把 height 改为 100%。
• 表格的 v-loading 记得移至上层元素或者此组件上。