elementui制作可编辑表格行-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementui制作可编辑表格行。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当点击某一行的编辑按钮时，单元格变成可输入的状态，点击保存之后变成纯展示状态。

效果如下：

elementui制作可编辑表格行

步骤：

（1）可编辑可展示的单元格需要两个状态，一个使用input标签包裹，一个使用span标签包裹，二者呈现互斥的状态，通过v-if绑定一个值让他们取反显示

      <el-table-column
        prop="videoName"
        label="视频名称"
        align="center"
        width="250"
      >
        <template slot-scope="scope">
          <!-- 编辑状态下显示 -->
          <el-input
            v-if="isshow[scope.$index]"
            type="text"
            size="mini"
            clearable
            v-model.trim="scope.row.videoName"
          />
          <!-- 展示状态下显示 -->
          <span v-if="!isshow[scope.$index]">{{ scope.row.videoName }}</span>
        </template>
      </el-table-column>

（2）操作按钮也需要两个，一个编辑按钮，一个保存按钮，二者呈现互斥的状态，通过v-if绑定一个值让他们取反显示

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="isshow[scope.$index]"
            size="mini"
            type="success"
            icon="el-icon-check"
            @click="handelCheck(scope.$index)"
          />
          <el-button
            v-if="!isshow[scope.$index]"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index)"
          />
        </template>
      </el-table-column>

（3）通过this.$set方法改变这个值，值isshow初始值为空数组，是一个全局的变量文章来源地址https://www.toymoban.com/news/detail-513752.html

  data() {
    return {
      // 控制参数表格输入显示
      isshow: [],
    };

  methods: {
    /**
     * @description: 编辑单行数参数
     * @param {index} 当前行索引值
     * @return void
     */
    handleEdit(index) {
      this.$set(this.isshow, index, true);
    },

    /**
     * @description: 保存单行参数
     * @param {index} 当前行索引值
     * @return void
     */
    handelCheck(index) {
      this.$set(this.isshow, index, false);
    },
  },

到了这里，关于elementui制作可编辑表格行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！