vue列设置 多选框加上拖拽效果

<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<div class="condition">
					<span class="textfont">创建日期范围：</span>
					<el-date-picker v-model="form.value2" type="daterange" align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div class="condition">
					<span class="textfont">工号：</span>
					<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
				</div>
				<div class="condition">
					<span class="textfont">姓名：</span>
					<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
				</div>
				<div class="condition">
					<span class="textfont">模块：</span>
					<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
				</div>
				<div class="condition">
					<span class="textfont">账号：</span>
					<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
				</div>
				<div class="condition">
					<span class="textfont">岗位：</span>
					<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
				</div>
				<div class="condition">
					<span class="textfont">归属团队：</span>
					<el-select v-model="form.customer_id" placeholder="请选择1" @keyup.enter.native="screen()">
						<el-option v-for="item in orderstateid" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="condition">
					<span class="textfont">归属企业：</span>
					<el-select v-model="form.customer_id" placeholder="请选择1" @keyup.enter.native="screen()">
						<el-option v-for="item in orderstateid" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="condition">
					<span class="textfont">状态：</span>
					<el-select v-model="form.customer_id" placeholder="请选择1" @keyup.enter.native="screen()">
						<el-option v-for="item in orderstateid" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="condition">
				</div>
				<div class="condition">
				</div>
				<div style="text-align: right;margin-right: 1%;" class="condition">
					<el-button type="primary" icon="el-icon-search">查询</el-button>
					<el-button icon="el-icon-refresh">重置</el-button>
				</div>
			</div>
		</div>
		<!--表格上方点击事件-->
		<div style="background: #FFFFFF;padding: 0px 20px 0px 20px;margin-top: 10px;text-align: right;">
		</div>
		<div style="padding: 15px 20px 20px 20px;background: #FFFFFF;">
			<vxe-grid :loading="loading" border resizable keep-source ref="xGrid" id="toolbar_demo_1" :height="tableHeight" :import-config="{}" :export-config="{}" :columns="tableColumn" :toolbar-config="tableToolbar" :pager-config="tablePage" :data="tableData">
				<template #operation="{ row }">
					<vxe-button v-for='(index,item) in row.caozuo' :key="index" status="primary" @click="uploadFileEvent(row)">{{item.aaa}}</vxe-button>
				</template>
				<template #toolbar_buttons>
					<el-popover placement="bottom" width="150" height="150" trigger="click" >
						<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
						<draggable v-model="citiestablelist" @end="end" chosen-class="chosen" force-fallback="true" group="people" animation="500">
							<transition-group tag="div" id="citiestablelist" class="item-ul">
								<div v-for="city in citiestablelist" :key="city.field" class='item'>
									<i class="el-icon-rank"></i>
									<el-checkbox  v-model='city.checked1' :label="city" :disabled='city.disabled' style="display:block;display: inline-block;margin-left: 10px;" @change="handleCheckedCitiesChange">{{city.title}}</el-checkbox>
								</div>

							</transition-group>
						</draggable>
						<el-button slot="reference" icon="el-icon-setting" circle style='margin-right: 10px;'></el-button>
					</el-popover>
					<vxe-button @click="">批量状态设置</vxe-button>
					<vxe-button @click="">批量修改</vxe-button>
					<vxe-button @click="">新建</vxe-button>
				</template>
				<template #pager>
					<vxe-pager border :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" :current-page.sync="tablePage.currentPage" :page-size.sync="tablePage.pageSize" :total="tablePage.total" @page-change="handlePageChange">
					</vxe-pager>
				</template>
			</vxe-grid>
		</div>
	</div>
</template>

<script>
	//拖拽组件，暂时没用
	import draggable from 'vuedraggable'
	import { fetchData } from '../../../../api/index';
	export default {
		name: 'basetable',
		data() {
			return {
				//所有表格的值
				citiestablelist: [{
						field: '1',
						disabled: true,
						type: 'checkbox',
						width: 160,

						checked1: true,
					},
					{
						field: '2',
						type: 'seq',
						title: '序号',
						width: 160,

						checked1: true,
					},
					{
						field: 'name',
						title: '账号',
						width: 160,
						checked1: true,
						editRender: {
							name: 'input'
						}
					},
					{
						field: 'money',
						title: '工号',
						width: 160,
						checked1: false,
						//是否正序倒叙
						sortable: true,
						filters: [{
							data: ''
						}],
						filterRender: {
							name: 'input',
							attrs: {
								placeholder: '按回车确认筛选'
							},
							events: {
								keyup: this.enterFilterEvent
							}
						},
						editRender: {
							name: 'input',
							events: {
								focus: this.ageFocusEvent
							}
						}
					},
					{
						field: 'state',
						title: '昵称',
						width: 500,
						checked1: false,
						filters: [{
								label: '成功',
								value: '成功'
							},
							{
								label: '失败',
								value: '失败'
							},
						],
					},
					{
						field: 'data1',
						title: '姓名',
						width: 160,
						checked1: false,
						//是否正序倒叙
						sortable: true,
						filters: [{
							data: ''
						}],
						filterRender: {
							name: 'input',
							attrs: {
								placeholder: '按回车确认筛选'
							},
							events: {
								keyup: this.enterFilterEvent
							}
						},
						editRender: {
							name: 'input'
						}
					},
					{
						field: 'id',
						title: '归属团队',
						width: 160,
						checked1: false,
						editRender: {
							name: 'input'
						}
					},
					{
						field: 'thumb',
						title: '岗位',
						checked1: false,
						showOverflow: true,
						minWidth: 300,
						editRender: {
							name: 'input'
						}
					},
					{
						field: '10',
						title: '操作',
						width: 320,
						fixed: "right",
						showOverflow: true,
						slots: {
							default: 'operation'
						}
					}
				],
				loading: false,
				//分页
				tablePage: {
					total: 100,
					currentPage: 1,
					pageSize: 10
				},
				tableHeight: window.innerHeight - 330,
				form: {},
				//时间值
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				orderstateid: [],
				tableData: [],
				tableToolbar: {
					refresh: {
						query: this.getData
					},
					import: true,
					export: true,
					print: true,
					zoom: true,
					custom: true,
					slots: {
						buttons: 'toolbar_buttons',
					}
				},
				//表格table的值
				tableColumn: [],
				isIndeterminate:true,
				checkAll:false,
			};
		},
		created() {
			this.getData();
			this.handleCheckedCitiesChange()
		},
		//拖拽组件，暂时没用
		components: {
			draggable
		},
		methods: {
			//全选
			handleCheckAllChange(val) {
				console.log(val)
				if(val){
					for(var i = 0;i<this.citiestablelist.length;i++){
						if(!this.citiestablelist[i].disabled){
							this.citiestablelist[i].checked1 = true
						}
						
					}
					}else{
						for(var i = 0;i<this.citiestablelist.length;i++){
							if(!this.citiestablelist[i].disabled){
							this.citiestablelist[i].checked1 = false
						}
						
					}
				}
//	        this.tableColumn = val ? this.citiestablelist : [];
			this.handleCheckedCitiesChange()
	        this.isIndeterminate = false;
	      },
			//拖拽结束
			end(evt){
				console.log(this.citiestablelist)
				let tableColumnoldlist = []
				for(var i = 0;i<this.citiestablelist.length;i++){
					if(this.citiestablelist[i].checked1){
						tableColumnoldlist.push(this.citiestablelist[i])
					}
				}
				this.tableColumn = tableColumnoldlist
			},
			handleCheckedCitiesChange(val) {
				let tableColumnoldlist = []
				for(var i = 0;i<this.citiestablelist.length;i++){
					if(this.citiestablelist[i].checked1){
						tableColumnoldlist.push(this.citiestablelist[i])
					}
				}
				this.tableColumn = tableColumnoldlist
		        this.checkAll = this.tableColumn.length === this.citiestablelist.length;
		        this.isIndeterminate = this.tableColumn.length > 0 && this.tableColumn.length < this.citiestablelist.length;
				
      },
			//			表格内部操作按钮
			uploadFileEvent(row) {
				console.log(row)
			},
			//分页
			handlePageChange({
				currentPage,
				pageSize
			}) {
				this.tablePage.currentPage = currentPage
				this.tablePage.pageSize = pageSize
				this.getData()
			},
			//筛选回车事件
			enterFilterEvent({
				$panel,
				column
			}, event) {
				if(event.keyCode === 13) {
					console.log('筛选回车事件')
					$panel.confirmFilter()
				}
			},
			toolbarCustomEvent() {
				console.log("aaa")
			},
			// 获取 easy-mock 的模拟数据
			getData() {
				this.loading = true
				this.tableData = [{
						"id": 1,
						"name": "张三",
						"money": 123,
						"address": "广东省东莞市长安镇",
						"state": "成功",
						"data1": "2019-11-1",
						"thumb": "https://lin-xin.gitee.io/images/post/wms.png",
						'caozuo': [{
							aaa: '设置'
						}, {
							aaa: '删除'
						}]
					},
					{
						"id": 2,
						"name": "李四",
						"money": 456,
						"address": "广东省广州市白云区",
						"state": "成功",
						"data1": "2019-10-11",
						"thumb": "https://lin-xin.gitee.io/images/post/node3.png",
						'caozuo': [{
							aaa: '设置'
						}, {
							aaa: '删除'
						}]
					}, {
						"id": 1,
						"name": "张三",
						"money": 123,
						"address": "广东省东莞市长安镇",
						"state": "成功",
						"data1": "2019-11-1",
						"thumb": "https://lin-xin.gitee.io/images/post/wms.png",
						'caozuo': [{
							aaa: '设置'
						}, {
							aaa: '删除'
						}]
					},
					{
						"id": 2,
						"name": "李四",
						"money": 456,
						"address": "广东省广州市白云区",
						"state": "成功",
						"data1": "2019-10-11",
						"thumb": "https://lin-xin.gitee.io/images/post/node3.png",
						'caozuo': [{
							aaa: '设置'
						}, {
							aaa: '删除'
						}]
					}, {
						"id": 1,
						"name": "张三",
						"money": 123,
						"address": "广东省东莞市长安镇",
						"state": "成功",
						"data1": "2019-11-1",
						"thumb": "https://lin-xin.gitee.io/images/post/wms.png",
						'caozuo': [{
							aaa: '设置'
						}, {
							aaa: '删除'
						}]
					},
					{
						"id": 2,
						"name": "李四",
						"money": 456,
						"address": "广东省广州市白云区",
						"state": "成功",
						"data1": "2019-10-11",
						"thumb": "https://lin-xin.gitee.io/images/post/node3.png",
						'caozuo': [{
							aaa: '设置'
						}, {
							aaa: '删除'
						}]
					}, {
						"id": 1,
						"name": "张三",
						"money": 123,
						"address": "广东省东莞市长安镇",
						"state": "成功",
						"data1": "2019-11-1",
						"thumb": "https://lin-xin.gitee.io/images/post/wms.png",
						'caozuo': [{
							aaa: '设置'
						}, {
							aaa: '删除'
						}]
					},
					{
						"id": 2,
						"name": "李四",
						"money": 456,
						"address": "广东省广州市白云区",
						"state": "成功",
						"data1": "2019-10-11",
						"thumb": "https://lin-xin.gitee.io/images/post/node3.png",
						'caozuo': [{
							aaa: '设置'
						}, {
							aaa: '删除'
						}]
					}
				]
				setTimeout(() => {
					this.loading = false
				}, 2000);
			},
			//表格上的刷新
			reload() {
				// 清除所有状态
				this.$refs.xGrid.clearAll()
				return this.getData()
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageIndex', 1);
				this.getData();
			},
		}
	};
</script>

<style scoped>
	.handle-select {
		width: 120px;
	}
	
	.handle-input {
		width: 300px;
		display: inline-block;
	}
	
	.table {
		width: 100%;
		font-size: 14px;
	}
	
	.red {
		color: #ff0000;
	}
	
	.mr10 {
		margin-right: 10px;
	}
	
	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
	
	.container {
		padding: 20px 20px 5px 20px;
		border: none;
	}
	
	.condition {
		width: 24%;
		margin-bottom: 16px;
		margin-right: 1%;
		border-radius: 0 !important;
		text-align: right;
	}
	
	.condition1 {
		width: calc(48% - 125px);
		margin-bottom: 16px;
		border-radius: 0 !important;
		text-align: right;
		margin-right: calc(2% + 125px);
	}
	
	.condition>div {
		width: calc(100% - 125px);
	}
	
	.condition1>div {
		width: calc(50% - 62.5px);
	}
	
	.handle-box {
		display: flex;
		flex-wrap: wrap;
	}
	
	.textfont {
		min-width: 125px;
		color: #666;
		font-size: 14px;
	}
	 .chosen {
          background-color: #f1f1f1;  
    }
    .item{
    	margin-top: 5px;
    	padding: 5px;
    }
    .item:hover {
                background-color: #f1f1f1;
                cursor: move;
            }
</style>