Question

vue中的element表格选中某一行进行编辑，

用vue的element的表格，怎样实现选中表格的一项，其表格那一列前面的对勾也相应的打出来。。

Answer 1

首先引入一下element的js
?

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;
});

},
}