Element-UI El-Table Draggable 项目教程

最新推荐文章于 2024-12-28 09:49:35 发布

吴彬心Quenna

最新推荐文章于 2024-12-28 09:49:35 发布

阅读量377

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00515/article/details/141852252

Element-UI El-Table Draggable 项目教程

element-ui-el-table-draggableMake 'el-table' of 'element UI' sortable.项目地址:https://gitcode.com/gh_mirrors/el/element-ui-el-table-draggable

1. 项目的目录结构及介绍

element-ui-el-table-draggable/
├── src/
│   ├── components/
│   │   ├── ElTableDraggable.vue
│   │   └── ...
│   ├── main.js
│   ├── App.vue
│   └── ...
├── public/
│   ├── index.html
│   └── ...
├── package.json
├── README.md
└── ...

src/：包含项目的源代码。
- components/：包含可拖拽表格组件 ElTableDraggable.vue 以及其他组件。
- main.js：项目的入口文件。
- App.vue：项目的主组件。
public/：包含公共资源，如 index.html。
package.json：项目的依赖和脚本配置文件。
README.md：项目的说明文档。

2. 项目的启动文件介绍

main.js

import Vue from 'vue';
import App from './App.vue';
import ElTableDraggable from './components/ElTableDraggable.vue';

Vue.component('ElTableDraggable', ElTableDraggable);

new Vue({
  render: h => h(App),
}).$mount('#app');

引入 Vue 和主组件 App.vue。
注册全局组件 ElTableDraggable。
创建 Vue 实例并挂载到 #app 元素上。

3. 项目的配置文件介绍

package.json

{
  "name": "element-ui-el-table-draggable",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "element-ui": "^2.15.0",
    "sortablejs": "^1.14.0",
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.12"
  }
}