共计 4767 个字符，预计需要花费 12 分钟才能阅读完成。
1、JSX 进阶
item.render = (h, { row, index, column}) => {
// keyArr 等于 this.insideData[index].edittingKeyArr, 如果 this.insideData[index].edittingKeyArr 没有值就为 undefined
const keyArr = this.insideData[index] ? this.insideData[index].edittingKeyArr : []
return (
<div>
{keyArr && keyArr.indexOf(column.key) > -1
? <i-input value={row[column.key]} on-input=z{this.handleInput.bind(this, row, index, column)}></i-input> : row[column.key] }
<i-button on-click={() => { this.handleClick({ row, index, column}) }}>{keyArr && keyArr.indexOf(column.key) > -1 ? ‘ 保存 ’ : ‘ 编辑 ’ }</i-button>
</div>
)
}
return item
2、单个单元格编辑表格
table.vue 表格父组件
<template>
<div>
<!– 单个单元格编辑表格 –>
<edit-table :columns=”columns” v-model=”tableData” @on-edit=”handleEdit”></edit-table>
<!– <edit-table-mul :columns=”columns” v-model=”tableData”></edit-table-mul> –>
<!– 多个单元格编辑表格 –>
<edit-table-mul-wang v-if=”tableShow” :columns=”columns” v-model=”tableData”></edit-table-mul-wang>
</div>
</template>
<script>
import {getTableData} from ‘@/api/data’
import EditTable from ‘_c/edit-table’
import EditTableMul from ‘_c/edit-table-mul’
import EditTableMulWang from ‘_c/edit-table-mul-wang’
export default {
components: {
EditTable,
EditTableMul,
EditTableMulWang
},
data () {
return {
tableData: [],
tableShow: false,
columns: [
{key: ‘name’, title: ‘ 姓名 ’},
{key: ‘age’, title: ‘ 年龄 ’, editable: true},
{key: ’email’, title: ‘ 邮箱 ’, editable: true}
]
}
},
methods: {
handleEdit ({row, index, column, newValue}) {
console.log(row, index, column, newValue)
}
},
mounted () {
getTableData().then(res => {
this.tableData = res
this.tableShow = true
})
}
}
</script>
edit-table.vue 子组件
<template>
<Table :columns=”insideColumns” :data=”value”></Table>
</template>
<script>
import clonedeep from ‘clonedeep’
export default {
name: ‘EditTable’,
data () {
return {
insideColumns: [],
edittingId: ”,
edittingContent: ”
}
},
props: {
columns: {
type: Array,
default: () => []
},
value: {
type: Array,
default: () => []
}
},
watch: {
columns () {
this.handleColumns()
}
},
methods: {
handleClick ({row, index, column}) {
// 如果点击保存按钮
if (this.edittingId === `${column.key}_${index}`) {
// 深复制传入的 value 值
let tableData = clonedeep(this.value)
// 赋值
tableData[index][column.key] = this.edittingContent
this.$emit(‘input’, tableData)
this.$emit(‘on-edit’, { row, index, column, newValue: this.edittingContent})
this.edittingId = ”
this.edittingContent = ”
} else {
this.edittingId = `${column.key}_${index}`
}
},
handleInput (newValue) {
this.edittingContent = newValue
},
handleColumns () {
const insideColumns = this.columns.map(item => {
// 判断 table 列有没有传入的 render 函数或者 editable 属性
if (!item.render && item.editable) {
item.render = (h, { row, index, column}) => {
// 刚开始 this.edittingId != `${column.key}_${index}` 所以 isEditting 等于 false
const isEditting = this.edittingId === `${column.key}_${index}`
return (
<div>
{isEditting ? <i-input value={row[column.key]} style=”width: 50px;” on-input={this.handleInput}></i-input> : <span>{row[column.key]}</span>}
<i-button on-click={this.handleClick.bind(this, { row, index, column})}>{isEditting ? ‘ 保存 ’ : ‘ 编辑 ’}</i-button>
</div>
)
}
return item
} else return item
})
this.insideColumns = insideColumns
}
},
mounted () {
this.handleColumns()
}
}
</script>
3、多单元格编辑表格
edit-table-mul.vue
<template>
<Table :columns=”insideColumns” :data=”value”></Table>
</template>
<script>
import clonedeep from ‘clonedeep’
export default {
name: ‘EditTable’,
data () {
return {
insideData: [],
insideColumns: []
}
},
props: {
columns: {
type: Array,
default: () => []
},
value: {
type: Array,
default: () => []
}
},
watch: {
value () {
this.handleColumns()
}
},
methods: {
handleClick ({row, index, column}) {
// keyIndex 为选中 column.key 在 this.insideData[index].edittingKeyArr 中的值
let keyIndex = this.insideData[index].edittingKeyArr ? this.insideData[index].edittingKeyArr.indexOf(column.key) : -1
let rowObj = this.insideData[index]
// 如果已经点击了
if (keyIndex > -1) {
// 删除 rowObj.edittingKeyArr 数组中的 column.key
rowObj.edittingKeyArr.splice(keyIndex, 1)
// 把 rowObj 替换到 insideData 数组中
this.insideData.splice(index, 1, rowObj)
this.$emit(‘input’, this.insideData)
this.$emit(‘on-edit’, { row, index, column, newValue: this.insideData[index][column.key] })
} else {
// 还没有点击
// 把 column.key 放入 rowObj.edittingKeyArr 中
rowObj.edittingKeyArr = (rowObj.edittingKeyArr) ? […rowObj.edittingKeyArr, column.key] : [column.key]
// 把 rowObj 替换到 insideData 数组中
this.insideData.splice(index, 1, rowObj)
}
},
handleInput (row, index, column, newValue) {
this.insideData[index][column.key] = newValue
},
handleColumns () {
this.insideData = clonedeep(this.value)
const insideColumns = this.columns.map(item => {
if (!item.render && item.editable) {
item.render = (h, { row, index, column}) => {
// keyArr 等于 this.insideData[index].edittingKeyArr, 如果 this.insideData[index].edittingKeyArr 没有值就为 undefined
const keyArr = this.insideData[index] ? this.insideData[index].edittingKeyArr : []
return (
<div>
{keyArr && keyArr.indexOf(column.key) > -1
? <i-input value={row[column.key]} on-input={this.handleInput.bind(this, row, index, column)}></i-input> : row[column.key] }
<i-button on-click={() => { this.handleClick({ row, index, column}) }}>{keyArr && keyArr.indexOf(column.key) > -1 ? ‘ 保存 ’ : ‘ 编辑 ’ }</i-button>
</div>
)
}
return item
} else return item
})
this.insideColumns = insideColumns
}
},
mounted () {
this.handleColumns()
}
}
</script>
