美文网首页vue
vue+elementui表格中的字段实现编辑保存

vue+elementui表格中的字段实现编辑保存

作者: Henry01 | 来源:发表于2021-12-09 16:23 被阅读0次

    根据后台返回的数据渲染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()
          })
        },
    
    }
    

    相关文章

      网友评论

        本文标题:vue+elementui表格中的字段实现编辑保存

        本文链接:https://www.haomeiwen.com/subject/yhvffrtx.html