?
1
<script src="plugins/element-ui/index.js"></script>
然后引入需要用到的vue相关的js文件
?
1
2
3
4
<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>
下面先说一下html文件
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div id="user">
<!-- 操作 -->
<ul class="btn-edit fr">
<li >
<el-button type="primary" @click="dialogCreateVisible = true">添加用户</el-button>
<el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" >删除</el-button>
<el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>
<el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>
</li>
</ul>
<!-- 用户列表-->
<el-table :data="users"
stripe
v-loading="loading"
element-loading-text="拼命加载中..."
style="width: 100%"
height="443"
@sort-change="tableSortChange"
@selection-change="tableSelectionChange">
<el-table-column type="selection"
width="60">
</el-table-column>
<el-table-column sortable="custom" prop="username"
label="用户名"
width="120">
</el-table-column>
<el-table-column prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column prop="phone"
label="手机"
>
</el-table-column>
<el-table-column prop="email"
label="邮箱">
</el-table-column>
<el-table-column prop="create_time" sortable="custom" inline-template
label="注册日期"
width="260">
<div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div>
</el-table-column>
<el-table-column inline-template
label="操作"
width="250">
<el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>
<el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>
</el-table-column>
</el-table>
<!--分页begin-->
<el-pagination class="tc mg"
:current-page="filter.page"
:page-sizes="[10, 20, 50, 100]"
:page-size="filter.per_page"
layout="total, sizes, prev, pager, next, jumper"
:total="total_rows"
@size-change="pageSizeChange"
@current-change="pageCurrentChange">
</el-pagination>
<!--分页end-->
</div>
这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到，然后我们就开始引入js
了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量
在methods进行我们的操作
?
1
2
3
4
5
vm = new Vue({
el: '#user',
data:{},
methods:{}
})
首先 我们先从读取数据开始
放入你的url
users是表格绑定的数组 也是存放从后台获取的数据
将需要显示的数据放在filter中
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
vm = new Vue({
el: '#user',
// 数据模型
data: function() {
return {
url: 'url',
users: [],
filter: {
per_page: 10, // 页大小
page: 1, // 当前页
name:'',
username:'',
phone:'',
is_active:'',
sorts:''
},
total_rows: 0,
loading: true,
}
},
methods:{}
})
接下来我们添加methods
pageSizeChange() 以及 pageCurrentChange()是用于分页的函数
在query() 是用于搜索的项目
getUsers() 就是用于获取数据
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
methods: {
pageSizeChange(val) {
this.filter.per_page = val
this.getUsers()
},
pageCurrentChange(val) {
this.filter.page = val
this.getUsers()
},
query(){
this.filter.name=''
this.filter.username=''
this.filter.phone=''
this.filter[this.select]=this.keywords
this.getUsers()
},
// 获取用户列表
getUsers() {
this.loading = true
var resource = this.$resource(this.url)
resource.query(this.filter)
.then((response) =>{
this.users = response.data.datas
this.total_rows = response.data.total_rows
this.loading = false
})
.catch((response)=>{
this.$message.error('错了哦，这是一条错误消息')
this.loading = false
})
},
}
1、首先定义一个public.mixin.js（mixin适用于多个页面需要使用到计算高度公共方法）
2、在index.vue文件里面编写
3、大概就这些内容谢谢大家关注，END
sortable.js 官网
拖放排序插件Sortable.js中文介绍
1. 安装 npm 或 yarn 安装
2. 使用
效果：
3. 小结
事件：
onChoose ：function 列表单元被选中的回调函数
onStart ：function 列表单元拖动开始的回调函数
onEnd ：function 列表单元拖放结束后的回调函数
onAdd ：function 列表单元添加到本列表容器的回调函数
onUpdate ：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove ：function 列表元素移到另一个列表容器的回调函数
onFilter ：function 试图选中一个被filter过滤的列表单元的回调函数
onMove ：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone ：function 当创建一个列表单元副本的时候的回调函数
事件对象：
to ：HTMLElement--移动到列表容器
from ：HTMLElement--来源的列表容器
item ：HTMLElement--被移动的列表单元
clone ：HTMLElement--副本的列表单元
oldIndex ：number/undefined--在列表容器中的原序号
newIndex ：number/undefined--在列表容器中的新序号
方法
option(name[,value])
获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；
toArray()
序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中
sort()
通过自定义列表单元的data-id的数组对列表单元进行排序
save()
destroy()
