>[success] # iview 可編輯表格案例 ~~~ 1.這個案例需要自行安裝iview Ui 組件庫 2.iview的table 和 ele的table 略有區別，iview的table 組件需要使用render函數去渲染 ~~~ >[info] ## 對iview--table 二次封裝的案例 * 實現效果 可以直接改變某列的數據  >[danger] ##### 封裝的目錄結構 ~~~ │ ├── 'components' // 存放組件文件夾 │ │ └── 'edit-table' // 存放對iview 二次封裝文件 │ │ └─ 'edit-table.vue' // 對iview-table 組件二次封裝自定義組存放位置 │ │ └─ 'index.js' // 入口文件 ~~~ >[danger] ##### 對edit-table.vue 封裝 ~~~ 1.再對iview - tbale 進行二次封裝的時候，需要簡單的看一下api 使用說明 這里將下面需要的主要說明簡單提取出來，方便理解 1.1.iview table配置和ele 不同，ele列配置需要我們使用ele-table提供的 'el-table-column' 組件，但iview 只需要你傳遞配置參數columns 1.2.iview-table 留出render 函數渲染模式的，在定制上更趨于數據驅動 2.組件的參數說明props中： 2.1.columns -- 接受父組件的iview-table 列的配置項 2.2 value -- 接受iview-table數據展示 3.二次封裝的設想構建，首先想做一個可編輯列的table，因此需要對我們， 對傳入組件進行配置的columns 參數進行二次加工，這里的做法增加一個 配置參數'editable' 來判斷當前列是否可以進行編輯 4.是否可以編輯在應該在dom渲染的時候就進行對應的操作因此選 擇'mounted' 的生命周期去做操作 5.操作數據 和 實際數據要進行深copy進行區分這里使用了'clonedeep'這個 插件 6.一共向外暴露兩個方法一個是input 因為v-model 語法糖原因，所以需要父 子組件相互傳遞暴露出去 7.一個是'on-edit' 讓用戶拿到編輯數據 ~~~ ~~~ <template> <Table :columns="insideColumns" :data="value"></Table> </template> <script> import clonedeep from 'clonedeep' export default { name: "edit-table", data(){ return{ insideColumns : [], edittingId:'', edittingContent:"", } }, props: { columns: { type: Array, default: () => [] }, value: { type: Array, default: () => [] }, }, methods:{ handleClick({row, index, column}){ // 保存 if(this.edittingId === `${column.key}_${index}` ){ let tableData = clonedeep(this.value); tableData[index][column.key] = this.edittingContent this.$emit('input',tableData); this.$emit('on-edit',{row, index, column, newValue:this.edittingContent}) this.edittingId = ''; this.edittingContent = ''; }else{ this.edittingContent = row[column.key]; this.edittingId = `${column.key}_${index}` } }, // 利用input 事件保存 input中的新數據 handleInput (newValue) { console.log(newValue) this.edittingContent = newValue; }, handleColumns(){ // iview 的table 和ele 不一樣他需要使用render 渲染 // 父傳子的時候判斷 當前列是否可以編輯 // 如果可以編輯 父傳子 進行條件判斷'!item.render && item.editable' // 在調用當前列的render 對象進行渲染即可 // 內容和 input 內容應該是二選一 展示，如果之前使用vue語法的時候使用的是v-if v-show 去控制 // 現在使用render 這種渲染的話 我們需要自己寫判斷條件 const insideColumns = this.columns.map(item=>{ if(!item.render && item.editable){ item.render = (h,{row, index, column})=>{ const isEditting = this.edittingId === `${column.key}_${index}`; // this.edittingContent = row[column.key] return( <div> {isEditting?<i-input value={row[column.key]} style="width:50px" on-input={this.handleInput}></i-input>: <span>{row[column.key]}</span>} <i-button on-click={this.handleClick.bind(this,{row, index, column})}>{isEditting? '保存' : '編輯'}</i-button> </div> ) } return item }else return item; }) this.insideColumns = insideColumns }, }, watch:{ columns(){ this.handleColumns() }, }, mounted(){ this.handleColumns() }, } </script> <style scoped> </style> ~~~ >[danger] ##### 使用 ~~~ 1.editable 是我們自己自定義的配置項 ~~~ ~~~ <template> <div> 111 <edit-table :columns="columns" v-model="tableData" @on-edit="handleEdit"></edit-table> </div> </template> <script> import EditTable from '_c/edit-table' import { getTableData } from '@/api/data' export default { data(){ return{ tableData:[], columns: [ { key: 'name', title: '姓名' }, { key: 'age', title: '年齡', editable: true }, { key: 'email', title: '郵箱', editable: true } ] } }, methods:{ handleEdit({row, index, column, newValue}){ console.log(row, index, column, newValue) } }, components:{ EditTable, }, mounted () { getTableData().then(res => { this.tableData = res }) } } </script> <style scoped> </style> ~~~