使用(vue+elementui+sortable.js )实现多表格的行拖拽

使用(vue+elementui+sortable.js )实现多表格的行拖拽

npm安装sortable.js

npm install sortablejs --save

在需要使用拖拽的vue文件中导入

import Sortable from 'sortablejs'

使用案例

  1. template里面
//多个表格
<el-card v-for="(item, index) in handlefnList" :key="index" class="card">
	<el-table :data="item.fnList" :row-key="rowkey" :class="`drag${index}`">
	    <el-table-column label="顺序" align="center" type="index"></el-table-column>
	    <el-table-column prop="name" label="名称" align="center"></el
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,实现顶部导航栏可以使用 Element UI 中的 `el-menu` 组件,具体实现步骤如下: 1. 安装 Element UI 通过 npm 安装 Element UI: ``` npm install element-ui -S ``` 2. 引入 Element UI 在 `main.js` 中引入 Element UI: ```js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 编写顶部导航栏 ```html <template> <div> <el-menu mode="horizontal" :router="true"> <el-menu-item index="/">首页</el-menu-item> <el-submenu index="/products"> <template slot="title">产品</template> <el-menu-item index="/products/mobile">手机</el-menu-item> <el-menu-item index="/products/computer">电脑</el-menu-item> </el-submenu> <el-menu-item index="/about">关于我们</el-menu-item> </el-menu> <router-view></router-view> </div> </template> ``` 在 `el-menu` 中设置 `mode="horizontal"` 表示水平导航栏,设置 `:router="true"` 开启路由模式。使用 `el-menu-item` 和 `el-submenu` 分别表示菜单项和子菜单。 4. 配置动态路由 在路由配置文件中,使用 `route` 方法实现动态路由: ```js import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import Products from './views/Products.vue' import Mobile from './views/Mobile.vue' import Computer from './views/Computer.vue' import About from './views/About.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/products', name: 'products', component: Products, children: [ { path: 'mobile', name: 'mobile', component: Mobile }, { path: 'computer', name: 'computer', component: Computer } ] }, { path: '/about', name: 'about', component: About } ] }) ``` 在 `routes` 中配置路由规则,使用 `children` 表示子路由。 这样就可以实现一个简单的带动态路由的顶部导航栏了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值