Heim > Artikel > Web-Frontend > Einführung in die Methode zur Implementierung editierbarer Tabellen in iView (mit Code)
Einführung in die Methode zur Implementierung editierbarer Tabellen in iView (mit Code)
- 不言nach vorne
- 2019-02-20 14:08:075209Durchsuche
Dieser Artikel bietet Ihnen eine Einführung in die Methode zur Implementierung bearbeitbarer Tabellen in iView (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.
Komponente
<i-table highlight-row ref="currentRowTable" :columns="columns" :data="tableData"></i-table>
Implementierungsmethode:
-
Zeichnen Sie die ID der Spalte auf, die aktuell bearbeitet werden muss, die Standardeinstellung ist leer
Die Spalte, die bearbeitet werden muss, entspricht der ID, die aktuell bearbeitet werden muss. Bei Erfolg wird die Spalte so gerendert, dass sie eine Eingabebeschriftungskomponente enthält, und das Eingabeereignis wird angezeigt gebunden sein
Datenverarbeitung
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 = ''
}
}
}
Hinweis: Wenn iView im Head-Tag eingeführt wird, ist diese Methode im Projekt ungültig durch Kompilierung entwickelt sind machbar
Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Implementierung editierbarer Tabellen in iView (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!