x-php-Admin/src/components/xTable/columnSetting.vue

<template>
	<div v-if="usercolumn.length>0" class="setting-column" v-loading="isSave">
		<div class="setting-column__title">
			<span class="move_b"></span>
			<span class="show_b">显示</span>
			<span class="name_b">名称</span>
			<span class="width_b">宽度</span>
			<span class="sortable_b">排序</span>
			<span class="tabletype">表格类型</span>
			<span class="fixed_b">固定</span>
		</div>
		<div class="setting-column__list" ref="list">
			<ul>
				<li v-for="item in usercolumn" :key="item.prop">
					<span class="move_b">
						<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
					</span>
					<span class="show_b">
						<el-switch v-model="item.hide" :active-value="false" :inactive-value="true"></el-switch>
					</span>
					<span class="name_b" :title="item.prop">
						<el-input v-model="item.label" placeholder="名称" size="small"></el-input>
					</span>
					<span class="width_b">
						<el-input v-model="item.width" placeholder="auto" size="small"></el-input>
					</span>
					<span class="sortable_b">
						<el-switch v-model="item.sortable"></el-switch>
					</span>
					<span class="tabletype">
						<el-select v-model="item.columntype" size="small" placeholder="选择">
							<el-option value="avatar" key="avatar" label="用户"> 用户 </el-option>
							<el-option value="badge" key="badge" label="徽章"> 徽章 </el-option>
							<el-option value="imagegroup" key="imagegroup" label="图组"> 图组 </el-option>
							<el-option value="image" key="image" label="单图"> 单图 </el-option>
							<el-option value="status" key="status" label="状态"> 状态 </el-option>
							<el-option value="input" key="input" label="Input"> Input </el-option>
							<el-option value="select" key="select" label="下拉选择"> 下拉选择 </el-option>
							<el-option value="tag" key="tag" label="时间组件"> 时间组件 </el-option>
							<el-option value="components" key="components" label="自定义组件"> 自定义组件 </el-option>
						</el-select>
					</span>
					<span class="fixed_b">
						<el-radio-group v-model="item.fixed" size="small">
						    <el-radio-button label="left">左</el-radio-button>
						    <el-radio-button label="">NO</el-radio-button>
						    <el-radio-button label="right">右</el-radio-button>
						</el-radio-group>
					</span>
				</li>
			</ul>
		</div>
		<div class="setting-column__bottom">
			<el-button @click="backDefaul" :disabled="isSave">重置</el-button>
			<el-button @click="save" type="primary">保存</el-button>
		</div>
	</div>
	<el-empty v-else description="暂无可配置的列" :image-size="80"></el-empty>
</template>

<script>
	import Sortable from 'sortablejs'

	export default {
		components: {
			Sortable
		},
		props: {
			column: { type: Object, default: () => {} }
		},
		data() {
			return {
				isSave: false,
				usercolumn: JSON.parse(JSON.stringify(this.column||[]))
			}
		},
		watch:{
			usercolumn: {
				handler(){
					this.$emit('userChange', this.usercolumn)
				},
				deep: true
			}
		},
		mounted() {
			this.usercolumn.length>0 && this.rowDrop()
		},
		methods: {
			rowDrop(){
				const _this = this
				const tbody = this.$refs.list.querySelector('ul')
				Sortable.create(tbody, {
					handle: ".move",
					animation: 300,
					ghostClass: "ghost",
					onEnd({ newIndex, oldIndex }) {
						const tableData = _this.usercolumn
						const currRow = tableData.splice(oldIndex, 1)[0]
						tableData.splice(newIndex, 0, currRow)
					}
				})
			},
			backDefaul(){
				this.$emit('back', this.usercolumn)
			},
			save(){
				this.$emit('save', this.usercolumn)
			}
		}
	}
</script>

<style scoped>
	.setting-column {}
	.setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;}
	.setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;}
	.setting-column__title span.move_b {width: 30px;margin-right:15px;}
	.setting-column__title span.show_b {width: 60px;}
	.setting-column__title span.name_b {width: 140px;}
	.setting-column__title span.width_b {width: 60px;margin-right:15px;}
	.setting-column__title span.sortable_b {width: 60px;}
	.setting-column__title span.tabletype {width: 160px;}
	.setting-column__title span.fixed_b {width: 120px;}
	.setting-column__list {max-height:314px;overflow: auto;}
	.setting-column__list li {list-style: none;margin:10px 0;display: flex;align-items: center;}
	.setting-column__list li>span {display: inline-block;font-size: 12px;}
	.setting-column__list li span.move_b {width: 30px;margin-right:15px;}
	.setting-column__list li span.show_b {width: 60px;}
	.setting-column__list li span.name_b {width: 140px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;cursor:default; padding-right:10px }
	.setting-column__list li span.width_b {width: 60px;margin-right:15px;}
	.setting-column__list li span.sortable_b {width: 60px;}
	.setting-column__list li span.tabletype {width: 140px; padding-right:20px;}
	.setting-column__list li span.fixed_b {width: 120px;}
	.setting-column__list li.ghost {opacity: 0.3;}
	.setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;}
	.dark .setting-column__title {border-color: var(--el-border-color-light);}
	.dark .setting-column__bottom {border-color: var(--el-border-color-light);}
</style>