>[success] # 編輯多個列  ~~~ 1.思路當觸發編輯的時候在，一每一行為對象為單位增加一 個'edittingKeyArr' 屬性是一個數組，用來記錄當前指定行中指定列變化 進行記錄 ~~~ ~~~ <template> <Table :columns="insideColumns" :data="value"></Table> </template> <script> import clonedeep from 'clonedeep' export default { name: 'EditTable', data () { return { insideData: [], insideColumns: [], edittingId: '', edittingContent: '' } }, props: { columns: { type: Array, default: () => [] }, value: { type: Array, default: () => [] } }, watch: { columns () { this.handleColumns() }, value () { this.handleColumns() } }, methods: { handleClick ({ row, index, column }) { let keyIndex = this.insideData[index].edittingKeyArr ? this.insideData[index].edittingKeyArr.indexOf(column.key) : -1 let rowObj = this.insideData[index] if (keyIndex > -1) { rowObj.edittingKeyArr.splice(keyIndex, 1) this.insideData.splice(index, 1, rowObj) this.$emit('input', this.insideData) this.$emit('on-edit', { row, index, column, newValue: this.insideData[index][column.key] }) } else { rowObj.edittingKeyArr = (rowObj.edittingKeyArr) ? [...rowObj.edittingKeyArr, column.key] : [column.key] this.insideData.splice(index, 1, rowObj) } }, handleInput (row, index, column, newValue) { this.insideData[index][column.key] = newValue }, handleColumns () { this.insideData = clonedeep(this.value) console.log(this.insideData) const insideColumns = this.columns.map(item => { if (!item.render && item.editable) { item.render = (h, { row, index, column }) => { const keyArr = this.insideData[index] ? this.insideData[index].edittingKeyArr : [] console.log(keyArr) return ( <div> {keyArr && keyArr.indexOf(column.key) > -1 ? <i-input value={row[column.key]} style="width: 50px;" on-input={this.handleInput.bind(this, row, index, column)}></i-input> : <span>{row[column.key]}</span>} <i-button on-click={() => { this.handleClick({ row, index, column }) }}>{ keyArr && keyArr.indexOf(column.key) > -1 ? '保存' : '編輯' }</i-button> </div> ) } return item } else return item }) this.insideColumns = insideColumns } }, mounted () { this.handleColumns() } } </script> <style> </style> ~~~