[JavaScript知识库]vue-design table 列拖拽

?

<template>
	<div class="app-main-wrapper">
		<Table border :columns="columns1" :data="data1"></Table>
	</div>
</template>

<script>
import { Button, Table } from 'view-design';
import Sortable from 'sortablejs';
export default {
	components: { Table },
	data() {
		return {
			columns1: [
				{
					title: 'Name',
					key: 'name',
				},
				{
					title: 'Age',
					key: 'age',
				},
				{
					title: 'Address',
					key: 'address',
				},
			],
			data1: [
				{
					name: 'John Brown',
					age: 18,
					address: 'New York No. 1 Lake Park',
					date: '2016-10-03',
				},
				{
					name: 'Jim Green',
					age: 24,
					address: 'London No. 1 Lake Park',
					date: '2016-10-01',
				},
				{
					name: 'Joe Black',
					age: 30,
					address: 'Sydney No. 1 Lake Park',
					date: '2016-10-02',
				},
				{
					name: 'Jon Snow',
					age: 26,
					address: 'Ottawa No. 2 Lake Park',
					date: '2016-10-04',
				},
			],
		};
	},
	mounted() {
		document.body.ondrop = function (event) {
			event.preventDefault();
			event.stopPropagation();
		};
		this.columnDrop();
	},
	methods: {
		getRowKey() {
			return row.id;
		},
		//行拖拽
		columnDrop() {
			const wrapperTr = document.querySelector('.ivu-table-header tr');
			this.sortable = Sortable.create(wrapperTr, {
				animation: 180,
				delay: 0,
				onEnd: (evt) => {
					const oldItem = this.columns1[evt.oldIndex];
					this.columns1.splice(evt.oldIndex, 1);
					this.columns1.splice(evt.newIndex, 0, oldItem);
				},
			});
		},
	},
};
</script>

<style>
</style>

{
  "name": "vue2-webpack5-template",
  "version": "1.0.0",
  "main": "main.js",
  "repository": "git@github.com:ddzy/vue2-webpack5-template.git",
  "description": "使用 vue2 结合 webpack5 搭建的模板",
  "keywords": [
    "vue.js",
    "vue",
    "webpack",
    "webpack5",
    "vue2",
    "template"
  ],
  "author": "ddzy <1766083035@qq.com>",
  "license": "MIT",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config ./webpack.config.ts",
    "start": "cross-env NODE_ENV=development webpack serve",
    "serve": "yarn start",
    "lint": "eslint --fix \"src/**/*.{js,ts,jsx,tsx}\" \"src/**/*.vue\"",
    "format": "prettier --write \"src/**/*.{js,ts,jsx,tsx}\" \"src/**/*.vue\" ./*.{js,ts}"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{ts,vue}": [
      "prettier --write",
      "eslint --fix"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.12.7",
    "@typescript-eslint/eslint-plugin": "^4.11.0",
    "@typescript-eslint/parser": "^4.11.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "eslint": "^7.16.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-vue": "^7.3.0",
    "html-webpack-plugin": "5.0.0-alpha.3",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3",
    "mini-css-extract-plugin": "^1.3.3",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.2.1",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.12",
    "ts-node": "^9.1.1",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.1.3",
    "vue-eslint-parser": "^7.3.0",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.10.3",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@babel/runtime": "^7.12.5",
    "sortablejs": "^1.15.0",
    "view-design": "^4.7.0",
    "vue": "^2.6.12",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2"
  }
}