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

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

组件

实现方式：记录当前需要编辑的列的id，默认为空

需要编辑的列与当前需要编辑的id进行匹配，成功则将该列渲染为包含input标签组件，并绑定input事件

数据处理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，该方法在项目中会失效；通过编译开发的项目可行；