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

首先引入一下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

})

},

}

在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。

这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复 *** 作。表单样式就不再赘述了，具体看图

这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。

2、为添加要素按钮绑定一个 addTab() 方法，用于在每次添加子表单时，向数组中push一个元素

3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素

4、如果要删除多余tab，需要在 <div>中声明一个 removeTab() 的方法，来删除对应的tab，这点区别于 addTab() ，它是定义在 <div>之外的，每次新增的tab都会插到整个表单的末尾。

这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。

1、将table组件声明在一个 <template>标签下，用以根据后台数据进行动态加载。

2、对表格中需要编辑的内容，可以在 <template>标签下声明一个输入框，并使用插槽来实现数据的绑定。

3、与上面相同的，声明一个 addRow() 的方法，用于增加表格的行数。

4、删除不想要的行，需要对应增加一个 deleteRow() 方法

在Vue5中添加按钮到滚动框非常容易，只需要使用v-scroll-button指令即可。首先，在滚动框的父元素中添加v-scroll-button指令，并为其指定一个唯一的ID，然后将滚动框的ID作为参数传入，例如：

<div v-scroll-button="scrollBoxId">

<div id="scrollBoxId">

// 滚动框内容

</div>

</div>

接下来，在滚动框中添加按钮只需要在滚动框内容中添加一个按钮标签即可，例如：

<div id="scrollBoxId">

<button>按钮</button>

// 滚动框内容

</div>

最后，可以使用Vue5的@click绑定按钮的点击事件，完成按钮的功能实现。

---