HTML:
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>iview example</title>
7 <link rel="stylesheet" type="text/css" href="./iview/iview.css">
8 <script type="text/javascript" src="./vue.min.js"></script>
9 <script type="text/javascript" src="./iview/iview.js"></script>
10 <script src="./expandRow.js"></script>
11 </head>
12
13 <body>
14 <div id="app">
15 <i-table :columns="columns" :data="data">
16 <template slot-scope="{ row, index }" slot="name">
17 <Input type="text" v-model="editName" v-if="editIndex === index" />
18 <span v-else>{{ row.name }}</span>
19 </template>
20
21 <template slot-scope="{ row, index }" slot="age">
22 <Input type="text" v-model="editAge" v-if="editIndex === index" />
23 <span v-else>{{ row.age }}</span>
24 </template>
25
26 <template slot-scope="{ row, index }" slot="birthday">
27 <Input type="text" v-model="editBirthday" v-if="editIndex === index" />
28 <span v-else>{{ getBirthday(row.birthday) }}</span>
29 </template>
30
31 <template slot-scope="{ row, index }" slot="address">
32 <Input type="text" v-model="editAddress" v-if="editIndex === index" />
33 <span v-else>{{ row.address }}</span>
34 </template>
35
36 <template slot-scope="{ row, index }" slot="action">
37 <div v-if="editIndex === index">
38 <i-Button @click="handleSave(index)">保存</i-Button>
39 <i-Button @click="editIndex = -1">取消</i-Button>
40 </div>
41 <div v-else>
42 <i-Button @click="handleEdit(row, index)">操作</i-Button>
43 </div>
44 </template>
45 </i-table>
46 </div>
47 <script>
48 new Vue({
49 el: "#app",
50 data: {
51 row: '',
52 columns: [
53 {
54 type: 'expand',
55 width: 50,
56 render: (h, params) => {
57 return h("expandRow", { //标签名称也是子组件的名称
58 props: {
59 row: params.row //子组件传值
60 }
61 })
62 }
63 },
64 {
65 title: '姓名',
66 slot: 'name'
67 },
68 {
69 title: '年龄',
70 slot: 'age'
71 },
72 {
73 title: '出生日期',
74 slot: 'birthday'
75 },
76 {
77 title: '地址',
78 slot: 'address'
79 },
80 {
81 title: '操作',
82 slot: 'action'
83 }
84 ],
85 data: [
86 {
87 name: '王小明',
88 age: 18,
89 birthday: '919526400000',
90 address: '北京市朝阳区芍药居'
91 },
92 {
93 name: '张小刚',
94 age: 25,
95 birthday: '696096000000',
96 address: '北京市海淀区西二旗'
97 },
98 {
99 name: '李小红',
100 age: 30,
101 birthday: '563472000000',
102 address: '上海市浦东新区世纪大道'
103 },
104 {
105 name: '周小伟',
106 age: 26,
107 birthday: '687024000000',
108 address: '深圳市南山区深南大道'
109 }
110 ],
111 editIndex: -1, // 当前聚焦的输入框的行数
112 editName: '', // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
113 editAge: '', // 第二列输入框
114 editBirthday: '', // 第三列输入框
115 editAddress: '', // 第四列输入框
116 },
117 methods: {
118 handleEdit(row, index) {
119 this.editName = row.name;
120 this.editAge = row.age;
121 this.editAddress = row.address;
122 this.editBirthday = row.birthday;
123 this.editIndex = index;
124 },
125 handleSave(index) {
126 this.data[index].name = this.editName;
127 this.data[index].age = this.editAge;
128 this.data[index].birthday = this.editBirthday;
129 this.data[index].address = this.editAddress;
130 this.editIndex = -1;
131 },
132 getBirthday(birthday) {
133 const date = new Date(parseInt(birthday));
134 const year = date.getFullYear();
135 const month = date.getMonth() + 1;
136 const day = date.getDate();
137 return `${year}-${month}-${day}`;
138 }
139 }
140 })
141 </script>
142 </body>
143
144 </html>
javascript: (子组件在HTML中引入)
Vue.component('expandRow', {//嵌套表格
props: {
row: Object
},
data: function () {
return {
//表头
columns1: [
{
title: 'Name', key: 'name',
render: (h, params) => {
//判断name数据来实现不同的样式和添加方法
if (params.row.name === "John Brown") {
return h("span", { //标签名称
style: {
color: "#FC857F",//样式-不能写例如font-size 应写为fontSize
},
}, params.row.name);//原始数据
} else if (params.row.name === "Jim Green") {
return h("span", {
style: {
color: "#41C3FF",
},
}, params.row.name);
} else {
return h("span", {
on:{
//添加事件
click:()=>{
console.log(params.row);
}
}
}, params.row.name);
}
}
},
{ title: 'Age', key: 'age' },
{ title: 'Address', key: 'address' },
{ title: '时间', key: 'date' },
{ title: '操作', key: 'action', slot: 'action' },
],
//表格数据
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
mounted: function () {
// console.log(this.row);
},
methods: {
handleEdit(row, index) {
console.log(row);
console.log(index);
}
},
template: `
<div>
<!-- columns:表头; data:表格数据 -->
<i-table :columns="columns1" :data="data1">
<template slot-scope="{row,index}" slot="action"> <!-- slot:的值要和表头中这个字段的 slot相同 -->
<i-Button @click="handleEdit(row,index)">操作</i-Button>
</template>
</i-table>
</div>
`
})