Element-UI实现可编辑的表格

Element-UI实现可编辑的表格,第1张

一、效果图

二、描述

有时候根据业务需求,需要对数据进行编辑保存,这时候有三种实现方式,分别是点击按钮d出d窗修改,双击d出d窗修改,以及直接在表格中点击进行修改等,本文讲述的就是最后一种。

功能描述:我们点击表格任意想要修改的表格单元格,可以显示一个文本框进行修改,当我们失去焦点或者内容发生改变的时候,执行修改或保存,然后隐藏文本框,完成修改保存。

三、代码案例
<el-table
          :data="powerMessageTableAll"
          border"
          @cell-click="cellclick"//单击某个单元格执行
        >
<el-table-column label="施工图及预算批复时间" width="160" align="center">
        <template slot-scope="scope">
          <el-date-picker
            v-if="scope.row.isOK"
            ref="gain"
            v-model="scope.row.sgtBudgetReplyTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%;hight:100%"
            @blur="handleEdit(scope)"//失去焦点隐藏文本框
            @change="changeData(scope)"//内容改变调用修改方法
          />
          <span v-else>{{ scope.row.sgtBudgetReplyTime }}</span>
        </template>
      </el-table-column>
      </el-table>

methods: {
	handleCurrentChange(row, event, column) {//显示文本框
      if (event.label === '施工图及预算批复时间') {
        this.$set(row, 'isOK', true)
      } else if (event.label === '第一批储备物资到货时间') {
        this.$set(row, 'isOK2', true)
      } else{
        return false
      }
      this.$nextTick(() => {
        this.$refs.gain.focus()//显示文本框并获取焦点
      })
    }handleEdit({ row, column }) {//隐藏文本框
      if (column.label === '施工图及预算批复时间') {
        this.$set(row, 'isOK', false)
      } else if (column.label === '第一批储备物资到货时间') {
        this.$set(row, 'isOK2', false)
      } 
    },
    changeData({ row }) {//该方法调用修改的接口进行修改
    },

}

备注:如果获取焦点事件没有生效,请检查表格字段中有没有fixed这个属性,有的话删除即可
至此完毕!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1323110.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存