iView实现可编辑表格的方法介绍（附代码）

本篇文章给大家带来的内容是关于iView实现可编辑表格的方法介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

组件

<i-table highlight-row ref="currentRowTable" :columns="columns" :data="tableData"></i-table>

实现方式：

数据处理

export default {
 data () {
 return {
 currentId: '',
 currentScore: '',
 columns: [
 { title: '名称', key: 'name', align: 'center' },
 {
 title: '班级',
 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: '操作',
 align: 'center',
 render: (h, p) => {
 const { currentId } = this
 const { id } = p.row
 const btnEdit = h('i-button', {
 on: {
 click: () => {
 this.currentId = id
 }
 }
 }, '编辑')

 const btnSaveCancel = [
 h('i-button', {
 on: {
 click: () => {
 this.handleSave(id)
 }
 }
 }, '保存'),
 h('i-button', {
 on: {
 click: () => {
 this.currentId = ''
 this.currentScore = ''
 }
 }
 }, '取消')]
 return currentId === id ? h('p', btnSaveCancel) : btnEdit
 }
 }
 ],
 tableData: [
 { id: 1, name: 1, score: 1 },
 { id: 2, name: 2, score: 2 }]
 }
 },

 methods: {
 handleSave (id) {
 const {currentScore, tableData} = this
 this.tableData = tableData.map(v => {
 return v.id === id ? { ...v, score: currentScore } : v
 })
 this.currentId = ''
 this.currentScore = ''
 }
 }
}

注意： 如果采用的是在 head 标签中引入 iView，该方法在项目中会失效；通过编译开发的项目可行；