vue el-table表格内行内编辑input、日期组件等

本文链接：https://blog.youkuaiyun.com/JSN___/article/details/122431119

本文介绍了一种基于Vue框架实现的表格行内编辑方法，通过双击或点击单元格触发编辑状态，支持输入框和日期选择器组件。文章详细展示了如何使用自定义指令使输入框自动获得焦点，并提供了数据变化时的处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table表格内行内编辑input、日期组件等

在这里插入图片描述

<template>
  <!-- table表格内行内编辑input、日期组件等 -->
  <div id="app">
    <!--  @cell-dblclick="tableDbEdit" 当单元格被双击击时会触发tableDbEdit事件，将文字变成input输入框,也可以使用单击事件@cell-click=''-->
    <el-table
      ref="table"
      :data="tableList"
      border
      style="width: 100%"
      @cell-click="tableDbEdit"
    >
      <!-- 编辑input组件-->
      <el-table-column prop="name" label="工作名称">
        <template slot-scope="scope">
          <!-- 条件判断如果满足则显示表单，否则默认展示文字 -->
          <el-input
            v-model="scope.row.name"
            v-if="showInput == `name${scope.row.id}`"
            @blur="blurInput(scope.row.id, 'name', scope.row.name)"
            v-focus
          >
          </el-input>
          <p v-else>{{ scope.row.name }}</p>
        </template>
      </el-table-column>
      <!-- 编辑日期组件-->
      <el-table-column prop="planStartTime" label="预计开始" align="center">
        <template v-slot="scope">
          <el-date-picker
            v-model="scope.row.planStartTime"
            v-if="showInput == `planStartTime${scope.row.id}`"
            type="date"
            :clearable="false"
            value-format="yyyy-MM-dd"
            placeholder="请选择开始日期"
            @blur="
              blurInput(scope.row.id, 'planStartTime', scope.row.planStartTime)
            "
            v-focus
          >
          </el-date-picker>
          <p v-else>{{ scope.row.planStartTime }}</p>
        </template>
      </el-table-column>
    </el-table>
    </div>
</template

<script>
export default {
  data() {
    return {
      //表格数据
      tableList: [
        {
          id: 0,
          name: "规划许可阶段",
          planStartTime: "2021-03-09"
        },
        {
          id: 1,
          name: "施工许可阶段",
          planStartTime: "2021-03-09"
        }
      ],
      showInput: "",
      oldData: {},
        };
  },

 directives: {
    // 通过自定义指令实现的表单自动获得光标的操作
    focus: {
      inserted: function(el) {
        if (el.tagName.toLocaleLowerCase() == "input") {
          el.focus();
        } else {
          if (el.getElementsByTagName("input")) {
            el.getElementsByTagName("input")[0].focus();
          }
        }
        el.focus();
      }
    },
    focusTextarea: {
      inserted: function(el) {
        if (el.tagName.toLocaleLowerCase() == "textarea") {
          el.focus();
        } else {
          if (el.getElementsByTagName("textarea")) {
            el.getElementsByTagName("textarea")[0].focus();
          }
        }
        el.focus();
      }
    }
  },

// 方法
  methods: {
    // 当input失去光标后进行的操作
    async blurInput(id, name, value) {
      let obj = {};
      // 判断数据是否有所改变，如果数据有改变则调用修改接口
      if (this.oldData[name] != value) {
        obj[name] = value; //被改变的数据
        // 然后再写调用接口，提交内容的东西就可以了
        console.log("===值改变了");
      }
      this.showInput = "";
    },
    /*
    方法参数皆为框架方法的默认传参
    row     行数据
    column  被点击的触发了方法的单元格
    event   事件
    */
    tableDbEdit(row, column, event) {
      this.showInput = column.property + row.id;
      this.oldData[column.property] = row[column.property];
    },
  }