根据后台返回的数据渲染table表格,在表格中某一个单元格实现可编辑,并且保存的功能,如下图:
image.png
<!--列表展示-->
<el-table
border
style="width: 100%"
:data="tableData"
@cell-click="changeNum"
v-loading = "isLoading"
element-loading-background = "rgba(255, 255, 255, .5)"
element-loading-text = "加载中,请稍后..."
element-loading-spinner = "el-icon-loading"
>
<el-table-column align="center" prop="hitch" label="名称" >
<template slot-scope="scope">
<el-input v-if="scope.row.isEditCell" v-model="scope.row.lasPath" @blur="cellBlur(scope.row,scope.lasPath)" style="width:70%" ref="hitchRef"></el-input>
<span v-else style="cursor:pointer">{{scope.row.lasPath}}</span>
</template>
</el-table-column>
</el-table>
methods: {
// 获取列表数据
getAlarmDataFn () {
getList({ pageSize: this.pageSize, currentPage: this.currentPage }).then((res) => {
this.tableData = res.pageRecode
this.count = res.allPageTotal
this.isLoading = false
// 遍历表数据,为每条数据添加isEditCell属性
var length = this.tableData.length
for (var i = 0; i < length; i++) {
this.tableData[i].isEditCell = false
}
})
},
// 编辑
changeNum (row, column) {
this.$set(row, 'isEditCell', true)
this.tableData = this.tableData.filter(item => {
return item
})
// 视图刷新
console.log(column.property)
if (column.property == 'remark') {
this.$nextTick(() => {
this.$refs.remarkRef.focus() // 视图出现后使input获取焦点
})
} else {
this.$nextTick(() => {
this.$refs.hitchRef.focus() // 视图出现后使input获取焦点
})
}
},
// 编辑框失去焦点
cellBlur (row, column) {
console.log(row.lasPath)
row.isEditCell = false
this.$set(row, 'isEditCell', false)
updateLasPath({ projectId: row.projectId, lasPath: row.lasPath }).then((res) => {
this.getAlarmDataFn()
})
},
}
网友评论