Maison > Article > interface Web > Introduction à la méthode d'implémentation des tableaux modifiables dans iView (avec code)
Introduction à la méthode d'implémentation des tableaux modifiables dans iView (avec code)
- 不言avant
- 2019-02-20 14:08:075209parcourir
Cet article vous présente la méthode d'implémentation de tableaux modifiables dans iView (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Composant
<i-table highlight-row ref="currentRowTable" :columns="columns" :data="tableData"></i-table>
Méthode de mise en œuvre :
Enregistrez l'identifiant de la colonne qui doit actuellement être modifiée, la valeur par défaut est vide
Faites correspondre la colonne qui doit être modifiée avec l'ID actuel qui doit être modifié. En cas de succès, la colonne sera rendue en tant que composant de balise d'entrée et liée à. l'événement d'entrée
Traitement des données
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 = ''
}
}
}
Remarque : Si iView est introduit dans la balise head, cette méthode sera invalide dans le projet ; les projets développés grâce à la compilation sont réalisables ;
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!