iview實現table的可編輯
阿新 • • 發佈：2019-02-18
遇到同事請教的這個問題，沒接觸過iview，以為和element一樣，只需要在table-column中使用作用域插槽即可，簡單又方便，結果發現它居然是用reder函式進行渲染的，so，仔細琢磨一下，寫了下面的demo，希望對大家有用。
效果：
程式碼：
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> </head> <body> <div id="app"> <i-table border :columns="columns2" :data="data3"></i-table> </div> <script> var app = new Vue({ el: '#app', data () { return { columns2: [ { title: 'Name', key: 'name' }, { title: 'Age', key: 'age', render: (h, params) => { if (params.row.$isEdit) { return h('input', { domProps: { value: params.row.age }, on: { input: function (event) { params.row.age = event.target.value } } }); } else { return h('div', params.row.age); } } }, { title: 'Address', key: 'address' }, { title: 'Action', key: 'action', render: (h, params) => { return h('Button', { props: { type: 'text', size: 'small' }, on: { click: () => { if (params.row.$isEdit) { this.handleSave(params.row) } else { this.handleEdit(params.row) } } } }, params.row.$isEdit ? '儲存' : '編輯') } } ], data3: [ { name: '哈哈', age: 18, address: '上海', $isEdit: false }, { name: '啦啦', age: 24, address: '北京', $isEdit: false } ] } }, methods: { handleEdit (row) { this.$set(row, '$isEdit', true) }, handleSave (row) { this.$set(row, '$isEdit', false) } } }) </script> </body> </html>