Element表格怎么嵌入复选框及单选框

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

<template>

<div>

<p>shopInfo</p>

<el-table

ref="multipleTable"

:data="tableData3"

tooltip-effect="dark"

highlight-current-row // element-UI提供的单选方法,可以使当前选中行高亮

style="width: 100%"

@current-change="handleSelectionChange"> // 单选方法,返回选中的表格行

<el-table-column

label="操作"

width="55">

<template slot-scope="scope">

<el-checkbox v-model="scope.row.checked"></el-checkbox> // 添加一个多选框,控制选中与否

</template>

</el-table-column>

<el-table-column

label="日期"

width="120">

<template slot-scope="scope">{{ scope.row.date }}</template>

</el-table-column>

<el-table-column

prop="name"

label="姓名"

width="120">

</el-table-column>

<el-table-column

prop="address"

label="地址"

show-overflow-tooltip>

</el-table-column>

</el-table>

</div>

</template>

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

export default {

name: 'shopInfo',

data () {

return {

tableData3: []

}

},

created () {

this.setTable()

},

methods: {

setTable () {

let resdata = [{

id: 44,

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

id: 89,

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

id: 23,

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

id: 88,

date: '2016-05-07',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}]

// 后台数据返回后,手动添加一个checked属性控制选中与否

resdata.forEach(item => {

item.checked = false

})

this.tableData3 = resdata

},

handleSelectionChange (row) {

this.tableData3.forEach(item => {

// 排他,每次选择时把其他选项都清除

if (item.id !== row.id) {

item.checked = false

}

})

console.log(row)

}

}

}