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