'更改baseTable和content样式'

src/components/base-table/index.vue

@@ -1,16 +1,41 @@
 <template>
 	<div class="base-table">
+		<!-- 花式新增按钮 -->
+		<div class="setting">
+			<template v-if="topBtnConfig.length > 0">
+				<!-- table顶部操作按钮区 -->
+				<div class="action_btn">
+					<template v-for="(btn, index) in topBtnConfig">
+						<span v-if="btn.type === 'add'" :key="index" style="display: inline-block" @click="clickTopButton(btn.type)">
+							<svg-icon style="width: 14px; height: 14px" class="iconPlus" icon-class="addPage" />
+							<span class="add">{{ $t('add') }}</span>
+						</span>
+					</template>
+				</div>
+			</template>
+			<!-- 设置小齿轮table列的图标 -->
+			<el-popover placement="bottom-start" width="200" trigger="click">
+				<div class="setting-box">
+					<el-checkbox v-for="(item, index) in tableHeadConfigs" :key="'cb' + index" v-model="selectedBox[index]" :label="item.name" />
+				</div>
+				<i slot="reference" class="el-icon-s-tools" style="color: #0b58ff" />
+			</el-popover>
+		</div>
+		<!-- border 属性增加边框:header-cell-style="{background:'#FAFAFA',color:'#606266',height: '40px'}" -->
+		<!-- <el-table :data="data" -->
 		<el-table
-			:data="data"
+			:data="renderData"
 			style="width: 100%"
 			fit
-			border
-			:header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }"
+			highlight-current-row
+			:header-cell-style="{ background: '#FAFAFA', color: '#000', height: '40px' }"
 			:max-height="maxHeight"
 			:span-method="spanMethod || null"
-		>
+			:row-style="{ height: '20px' }"
+			:cell-style="{ padding: '0px' }">
 			<!-- 表格头定义 -->
-			<template v-for="(head, idx) in tableHeadConfigs">
+			<!-- in tableHeadConfigs -->
+			<template v-for="(head, idx) in renderTableHeadList">
 				<!-- 带type的表头 -->
 				<el-table-column
 					:key="idx"
@@ -20,11 +45,14 @@
 					:header-align="head.align || 'center'"
 					:align="head.align || 'center'"
 					:width="head.width || 50"
-					:index="head.type === 'index' ? val => {
-						return val + 1 + (page - 1) * size
-					} : null"
-					v-bind="head.more"
-				></el-table-column>
+					:index="
+						head.type === 'index'
+							? (val) => {
+									return val + 1 + (page - 1) * size
+							  }
+							: null
+					"
+					v-bind="head.more"></el-table-column>
 				<!-- 普通的表头 -->
 				<el-table-column
 					v-else
@@ -38,9 +66,8 @@
 					:tooltip-effect="head.tooltipEffect || 'light'"
 					filter-placement="top"
 					:align="head.align || null"
-					v-bind="head.more"
-				>
-					<!-- 子组件 -->
+					v-bind="head.more">
+					<!-- 子组件 编辑/删除 -->
 					<template v-if="head.prop" slot-scope="scope">
 						<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emit-data="handleSubEmitData" />
 						<!-- 直接展示数据或应用过滤器 -->
@@ -58,13 +85,21 @@
 </template>
 
 <script>
+import { isObject, isString } from 'lodash'
 import TableHead from './components/table-head.vue'
 export default {
 	name: 'BaseTable',
+	filters: {
+		commonFilter: (source, filterType = (a) => a) => {
+			return filterType(source)
+		}
+	},
 	props: {
 		tableHeadConfigs: {
 			type: Array,
 			default: () => []
+			// required: true,
+			// validator: val => val.filter(item => !isString(item.prop) || !isString(item.name)).length === 0
 		},
 		data: {
 			type: Array,
@@ -72,6 +107,7 @@ export default {
 		},
 		maxHeight: {
 			type: Number,
+			// default: window.innerHeight - 325
 			default: 500
 		},
 		spanMethod: {
@@ -88,21 +124,92 @@ export default {
 		size: {
 			type: Number,
 			default: 10
+		},
+		// 新增的props
+		// tableConfig: {
+		// 	type: Array,
+		// 	required: true,
+		// 	validator: (val) => val.filter((item) => !isString(item.prop) || !isString(item.label)).length === 0
+		// },
+		topBtnConfig: {
+			type: Array,
+			default: () => {
+				return []
+			}
 		}
 	},
 	filters: {
-		commonFilter: (source, filterType = a => a) => {
+		commonFilter: (source, filterType = (a) => a) => {
 			return filterType(source)
 		}
 	},
 	data() {
-		return {}
+		return {
+			selectedBox: new Array(100).fill(true)
+		}
+	},
+	computed: {
+		renderData() {
+			return this.data.map((item, index) => {
+				return {
+					...item,
+					_pageIndex: (this.page - 1) * this.limit + index + 1
+				}
+			})
+		},
+		renderTableHeadList() {
+			return this.tableHeadConfigs.filter((item, index) => {
+				return this.selectedBox[index]
+			})
+		}
+	},
+	beforeMount() {
+		this.selectedBox = new Array(100).fill(true)
+		if (this.highIndex) {
+			this.tableRowIndex = 0
+		}
+	},
+	created() {
+		// console.log(this.selectedBox)
+		console.log(this.tableHeadConfigs)
 	},
 	methods: {
 		handleSubEmitData(payload) {
 			this.$emit('operate-event', payload)
+		},
+		clickTopButton(val) {
+			this.$emit('clickTopBtn', val)
 		}
 	},
 	components: { TableHead }
 }
 </script>
+
+<style lang="scss">
+.setting {
+	text-align: right;
+	padding: 0px 15px 7px;
+	.action_btn {
+		display: inline-block;
+		margin-right: 15px;
+		font-size: 14px;
+		.add {
+			color: #0b58ff;
+		}
+	}
+	.setting-box {
+		width: 100px;
+	}
+	i {
+		color: #aaa;
+	}
+}
+.el-table .success-row {
+	background: #eaf1fc;
+}
+.iconPlus {
+	color: #0b58ff;
+	margin-right: 2px;
+}
+</style>
+