UP

src/components/scTable/columnSetting.vue

@@ -1,7 +1,8 @@
 <template>
+	<div>
 	<div class="setting-column">
 		<div class="sys">
-			<h4>隐藏</h4>
+			<h4>左固定</h4>
 			<ul>
 				<draggable v-model="sys" animation="200" group="people" :sort="false" item-key="prop">
 					<template #item="{ element }">
@@ -14,11 +15,11 @@
 			</ul>
 		</div>
 		<div class="user">
-			<h4>显示</h4>
+			<h4>普通</h4>
 			<ul>
 				<draggable v-model="user" animation="200" group="people" @change="change" item-key="prop">
 					<template #item="{ element }">
-						<li>{{ element.label }}</li>
+						<li>{{ element.label }} <el-checkbox v-model="element.sortable">排序</el-checkbox></li>
 					</template>
 					<template #footer>
 						<el-empty v-if="user.length == 0" description="没有显示列" :image-size="50"></el-empty>
@@ -26,11 +27,27 @@
 				</draggable>
 			</ul>
 		</div>
+		<div class="fixedRight">
+			<h4>右固定</h4>
+			<ul>
+				<draggable v-model="fixedRight" animation="200" group="people" :sort="false" item-key="prop">
+					<template #item="{ element }">
+						<li>{{ element.label }}</li>
+					</template>
+					<template #footer>
+						<el-empty v-if="fixedRight.length == 0" description="没有隐藏列" :image-size="50"></el-empty>
+					</template>
+				</draggable>
+			</ul>
+		</div>
+	</div>
+	<el-button @click="backDefaul">重置</el-button>
 	</div>
 </template>
 
 <script>
 	import draggable from 'vuedraggable'
+
 	export default {
 		components: {
 			draggable
@@ -40,21 +57,31 @@
 		},
 		data() {
 			return {
-				sys: [
+				defaultColumn: JSON.parse(JSON.stringify(this.column||[])),
-					{label: "姓名", prop: "name"},
+				sys: [],
-					{label: "性别", prop: "sex"},
+				user: [],
-					{label: "头像", prop: "a"},
+				fixedRight: []
-					{label: "加入时间", prop: "time"}
-				],
-				user: []
 			}
 		},
 		mounted() {
-			this.sys = this.column || []
+			//this.sys = this.column.filter(item => item.hide ) || []
+			//this.user = this.column.filter(item => !item.hide ) || []
 		},
 		methods: {
-			change(){
+			backDefaul(){
-				this.$emit('userChange', this.user)
+				var defaultColumn = JSON.parse(JSON.stringify(this.defaultColumn));
+				this.sys = defaultColumn.filter(item => item.hide ) || []
+				this.user = defaultColumn.filter(item => !item.hide ) || []
+				console.log(defaultColumn)
+				this.$emit('userChange', defaultColumn)
+			},
+			change(evt){
+				if(evt.added){
+					delete evt.added.element.hide
+				}else if(evt.removed){
+					evt.removed.element.hide=true
+				}
+				this.$emit('userChange', {...this.sys, ...this.user})
 			},
 			remove(index){
 				this.sys.push(this.user[index]);
@@ -69,7 +96,7 @@
 	.setting-column > div > ul {margin-top: 15px;height:300px;overflow: auto;}
 	.setting-column > div > ul > div {height: 100%;}
 	.setting-column > div > ul li {cursor: move;font-size: 12px;list-style-type: none;height:32px;line-height: 32px;background: #ecf5ff;color: #409EFF;border: 1px solid #d9ecff;border-radius: 4px;padding: 0 8px;margin-bottom:5px;}
-	.setting-column .sys {flex:1;margin-right:15px;padding-right:15px;border-right: 1px solid #eee;}
+	.setting-column .sys {width: 150px;margin-right:15px;padding-right:15px;border-right: 1px solid #eee;}
-	.setting-column .user {flex:1;}
+	.setting-column .user {flex: 1;}
 	.sortable-ghost {opacity: 0.5;}
 </style>

src/components/scTable/index.vue

@@ -3,15 +3,19 @@
 		<div class="scTable-table">
 			<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow"  @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange" @filter-change="filterChange">
 				<slot></slot>
-				<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
+				<template v-for="(item, index) in userColumn" :key="index">
+					<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler">
 						<template #default="scope">
+							<slot :name="item.prop" v-bind="scope">
 								{{scope.row[item.prop]}}
+							</slot>
 						</template>
 						<template #header>
 							{{item.label}}
 							<i class="el-icon-remove" style="color: #F56C6C;cursor: pointer;" @click="removeColumn(index)"></i>
 						</template>
 					</el-table-column>
+				</template>
 				<el-table-column min-width="1"></el-table-column>
 				<template #empty>
 					<el-empty :description="emptyText" :image-size="100"></el-empty>
@@ -24,7 +28,7 @@
 			</div>
 			<div class="scTable-do" v-if="!hideDo">
 				<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
-				<el-popover placement="top" title="设置" :width="500" trigger="click">
+				<el-popover placement="top" title="设置" :width="600" trigger="click">
 					<template #reference>
 						<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
 					</template>
@@ -82,7 +86,7 @@
 				loading: false,
 				tableHeight:'100%',
 				tableParams: this.params,
-				userColumn: []
+				userColumn: this.column
 			}
 		},
 		created() {
@@ -179,6 +183,11 @@
 				}
 				this.getData()
 			},
+			//本地过滤
+			filterHandler(value, row, column){
+				const property = column.property;
+				return row[property] === value;
+			},
 			//过滤事件
 			filterChange(filters){
 				if(!this.remoteFilter){

src/views/template/list/index.vue

@@ -30,33 +30,34 @@
 		</el-header>
 		<el-main class="nopadding">
 			<scTable ref="table" :data="list" :column="column" @selection-change="selectionChange" stripe>
-				<el-table-column type="selection" width="50"></el-table-column>
+				<!-- 扩展行 -->
-				<el-table-column label="ID" prop="id" width="80" sortable></el-table-column>
+				<el-table-column type="expand">
-				<el-table-column label="状态" prop="state" width="60" :filters="[{text: '正常', value: '1'}, {text: '异常', value: '2'}]" :filter-method="filterHandler">
+					<template #default="props">
-					<template #default="scope">
+						<div>{{ props.row.name }}</div>
+					</template>
+				</el-table-column>
+
+				<!-- 各列自定义template -->
+				<template #state="scope">
 					<em v-if="scope.row.state=='1'" class="state state-1"></em>
 					<em v-if="scope.row.state=='2'" class="state state-2 status-processing"></em>
 				</template>
-				</el-table-column>
+				<template #name="scope">
-				<el-table-column label="名称" prop="name" width="300">
-					<template #default="scope">
 					<h4>{{scope.row.name}}</h4>
 					<p>{{scope.row.subtitle}}</p>
 				</template>
-				</el-table-column>
+				<template #type="scope">
-				<el-table-column label="类型" prop="type" width="100" :filters="[{text: '数据', value: '数据'}, {text: '表单', value: '表单'}]" :filter-method="filterHandler">
-					<template #default="scope">
 					<el-tag>{{scope.row.type}}</el-tag>
 				</template>
-				</el-table-column>
+				<template #progress="scope">
-				<el-table-column label="负责人" prop="user" width="100"></el-table-column>
-				<el-table-column label="进度" prop="progress" width="250">
-					<template #default="scope">
 					<el-progress v-if="scope.row.state=='1'" :percentage="scope.row.progress"></el-progress>
 					<el-progress v-if="scope.row.state=='2'" :percentage="scope.row.progress" status="exception"></el-progress>
 				</template>
-				</el-table-column>
+
-				<el-table-column label="创建时间" prop="time" width="150" sortable></el-table-column>
+				<!-- 固定列-选择列 -->
+				<el-table-column type="selection" width="50"></el-table-column>
+
+				<!-- 固定列-操作列 -->
 				<el-table-column label="操作" fixed="right" align="right" width="200">
 					<template #default="scope">
 						<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
@@ -127,8 +128,46 @@
 					}
 				],
 				column: [
-					{label: "状态值", prop: "state", width: "100"},
+					{
-					{label: "进度值", prop: "progress", width: "150"},
+						label: "ID",
+						prop: "id",
+						width: "100",
+						sortable: true,
+						hide: true,
+					},
+					{
+						label: "名称",
+						prop: "name",
+						width: "300"
+					},
+					{
+						label: "状态",
+						prop: "state",
+						width: "100",
+						filters: [{text: '正常', value: '1'}, {text: '异常', value: '2'}]
+					},
+					{
+						label: "类型",
+						prop: "type",
+						width: "100",
+						filters: [{text: '数据', value: '数据'}, {text: '表单', value: '表单'}]
+					},
+					{
+						label: "负责人",
+						prop: "user",
+						width: "100"
+					},
+					{
+						label: "进度",
+						prop: "progress",
+						width: "250"
+					},
+					{
+						label: "创建时间",
+						prop: "time",
+						width: "150",
+						sortable: true
+					},
 				],
 				group: "0",
 				selection: [],