create at: 2019-02-20
assembly
<i-table highlight-row ref="currentRowTable" :columns="columns" :data="tableData"></i-table>
Implementation mode:
- Record the id of the current column to be edited. It is empty by default
- The column to be edited matches the id to be edited currently. If it succeeds, the column will be rendered as containing the input tag component and the input event will be bound
data processing
export default { data () { return { currentId: '', currentScore: '', columns: [ { title: 'Name', key: 'name', align: 'center' }, { title: 'class', align: 'center', render: (h, p) => { const { id, score } = p.row const inp = h('input', { style: { width: '30%', padding: '4px 2px', borderRadius: '4px', border: '1px solid #e9eaec', textAlign: 'center' }, attrs: { maxlength: 16 }, domProps: { value: score }, on: { input: (event) => { this.currentScore = event.target.value } } }) return this.currentId === p.row.id ? inp : h('span', score) } }, { title: 'operation', align: 'center', render: (h, p) => { const { currentId } = this const { id } = p.row const btnEdit = h('i-button', { on: { click: () => { this.currentId = id } } }, 'edit') const btnSaveCancel = [ h('i-button', { on: { click: () => { this.handleSave(id) } } }, 'Preservation'), h('i-button', { on: { click: () => { this.currentId = '' this.currentScore = '' } } }, 'cancel')] return currentId === id ? h('div', btnSaveCancel) : btnEdit } } ], tableData: [ { id: 1, name: 1, score: 1 }, { id: 2, name: 2, score: 2 }] } }, methods: { handleSave (id) { const = this this.tableData = tableData.map(v => { return v.id === id ? { ...v, score: currentScore } : v }) this.currentId = '' this.currentScore = '' } } }
Note: if you use iView in the head tag, this method will fail in the project; the project developed by compiling is feasible;
If you have any questions, please correct them Github blog issues