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

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

首先引入一下element的js
?

1



然后引入需要用到的vue相关的js文件
?

1
2
3
4






下面先说一下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

• 
  添加用户
  删除
  停用
  激活
  
  
  
  stripe
  v-loading="loading"
  element-loading-text="拼命加载中..."
  style="width: 100%"
  height="443"
  @sort-change="tableSortChange"
  @selection-change="tableSelectionChange">
  width="60">
  
  label="用户名"
  width="120">
  
  label="姓名"
  width="120">
  
  label="手机"
  >
  
  label="邮箱">
  
  label="注册日期"
  width="260">
  {{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}
  
  label="操作"
  width="250">
  删除
  编辑
  
  
  
  :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">
  
  
  
  
  这一段是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;
  });
  
  },
  }

好

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息