基于Vue + ElementUI实现可编辑表格及校验

更新时间：2023年08月02日 08:52:16 作者：庄周de蝴蝶

这篇文章主要给大家介绍了基于Vue + ElementUI 实现可编辑表格及校验,文中有详细的代码讲解和实现思路,讲解的非常详细,有需要的朋友可以参考下

效果

实现思路

使用两个表单分别用于实现修改和新增处理。
通过一个editIndex变量判断是否是编辑状态来决定是否展示输入框，当点击指定行的修改后进行设置即可：

<el-table-column
  v-for="(column, index) in columns"
  :key="index"
  :label="column.label"
  :prop="column.prop"
  align="center">
  <template #default="{ row, $index }">
    <div v-if="$index === editIndex" class="validate-info">
      <el-form-item :prop="column.prop">
        <el-input v-model="editRow[column.prop]"/>
      </el-form-item>
    </div>
    <span v-else>
      <span>{{ row[column.prop] }}</span>
    </span>
  </template>
</el-table-column>

edit(row, index) {
  if (this.editIndex > -1) {
    this.$message.warning('请先完成修改中的行')
    return
  }
  this.editRow = {...row}
  this.editIndex = index
}

通过隐藏表头实现新增表格和修改表格的合并，同时表格数据只有addRow：

<el-table :data="[addRow]" :show-header="false">
    ...
</el-table>

实现细节讲解

当无数据时只展示新增行：

通过设置以下样式即可：

/deep/ .el-table__empty-block {
	display: none;
}

新增或者修改数据行时增加行高用于显示校验信息：

行高通过以下样式进行控制，不处于新增或者修改状态时设置为 0 即可：

.add-table /deep/ .el-form-item {
  margin: 18px 0;
}

为了在修改时只设置修改行的行高，只需要只对输入框绑定样式即可：

<div v-if="$index === editIndex" class="validate-info">
  <el-form-item :prop="column.prop">
    <el-input v-model="editRow[column.prop]"/>
  </el-form-item>
</div>

完整代码

<template>
  <div class="app">
    <el-form
      ref="editableForm"
      :model="editRow"
      :rules="rules"
      label-width="0"
      :show-message="true"
      class="editable-table">
      <el-table :data="tableData">
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :label="column.label"
          :prop="column.prop"
          align="center">
          <template #default="{ row, $index }">
            <div v-if="$index === editIndex" class="validate-info">
              <el-form-item :prop="column.prop">
                <el-input v-model="editRow[column.prop]"/>
              </el-form-item>
            </div>
            <span v-else>
              <span>{{ row[column.prop] }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row, $index }">
            <el-form-item>
              <template v-if="$index === editIndex">
                <el-button type="success" size="mini" plain @click="save">保存</el-button>
                <el-button type="info" size="mini" plain @click="cancel">取消</el-button>
              </template>
              <template v-else>
                <el-button
                  type="primary"
                  size="mini"
                  plain
                  @click="edit(row, $index)">
                  修改
                </el-button>
                <el-popconfirm
                  title="是否确认删除？"
                  @confirm="deleteRow($index)"
                  style="margin-left: 10px;">
                  <el-button slot="reference" type="danger" size="mini" plain>删除</el-button>
                </el-popconfirm>
              </template>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-form
      ref="addForm"
      :model="addRow"
      :rules="rules"
      label-width="0"
      :show-message="true"
      class="add-table">
      <el-table :data="[addRow]" :show-header="false">
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :label="column.label"
          :prop="column.prop"
          align="center">
          <template #default="{ row }" class="validate-info">
            <div class="validate-info">
              <el-form-item :prop="column.prop">
                <el-input v-model="addRow[column.prop]"/>
              </el-form-item>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <template #default="{ row }">
            <el-form-item>
              <el-button type="success" size="mini" plain @click="add(row)">新增</el-button>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        {
          username: '张三',
          address: '北京'
        },
        {
          username: '李四',
          address: '上海'
        }
      ],
      //配置列
      columns: [
        {
          label: '用户名',
          prop: 'username'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      // 规则
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        address: [{required: true, message: '请输入地址', trigger: 'blur'}],
      },
      // 当前编辑行下标
      editIndex: -1,
      // 当前编辑行
      editRow: {
        username: '',
        address: ''
      },
      // 新增行
      addRow: {
        username: '',
        address: ''
      }
    }
  },
  methods: {
    save() {
      this.$refs.editableForm.validate((valid) => {
        if (valid) {
          this.tableData.splice(this.editIndex, 1, { ...this.editRow })
          this.editIndex = -1
          this.$message.success('修改成功')
        }
        return valid
      })
    },
    cancel() {
      this.editIndex = -1
    },
    edit(row, index) {
      if (this.editIndex > -1) {
        this.$message.warning('请先完成修改中的行')
        return
      }
      this.editRow = {...row}
      this.editIndex = index
    },
    add(row) {
      if (this.editIndex > -1) {
        this.$message.warning('请先完成修改中的行')
        return
      }
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addRow = {}
          this.tableData.push({ ... row})
          this.$message.success('新增成功')
        }
        return valid
      })
    },
    deleteRow(index) {
      this.tableData.splice(index, 1)
      this.$message.success('删除成功!');
    }
  }
}
</script>
<style scoped lang="less">
.app {
  padding: 20px;
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}
.validate-info {
  /deep/ .el-form-item {
    margin: 18px 0;
  }
}
.editable-table {
  /deep/ .el-table__empty-block {
    display: none;
  }
}
.editable-table, .add-table {
  width: 60%;
  margin: 0 auto;
}
</style>

以上就是基于Vue + ElementUI实现可编辑表格及校验的详细内容，更多关于Vue + ElementUI可编辑表格的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue+echarts实现动态折线图的方法与注意
这篇文章主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue如何获取图片流数据并展示
这篇文章主要介绍了vue如何获取图片流数据并展示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
vue歌曲进度条示例代码
这篇文章主要介绍了vue歌曲进度条demo，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-10-10
Vue3用Proxy替代defineProperty的原因
vue的人都知道,vue3里面使用了proxy替换了defineProperty,本文主要介绍了Vue3用Proxy替代defineProperty的原因,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
vue Element左侧无限级菜单实现
这篇文章主要介绍了vue Element左侧无限级菜单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue3+vite中开发环境与生产环境全局变量配置指南
最近在使用vite生成项目,这篇文章主要给大家介绍了关于vue3+vite中开发环境与生产环境全局变量配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue3 Vite 进阶rollup命令行使用详解
这篇文章主要介绍了vue3 Vite 进阶rollup命令行使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue实现各种文件文档下载及导出示例
这篇文章主要介绍了vue实现各种文件文档下载及导出示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vxe-table 使用 vxe-upload 在表格中实现非常强大的粘贴上传图片和附件功能
本文通过实例代码介绍了vxe-table渲染器的强大功能,配合 vxe-upload 上传,比如复制或者截图一张图片,通过粘贴方式快速粘贴到单元格中,能支持单张、多张、查看、预览功能,感兴趣的朋友跟随小编一起看看吧
2024-12-12
想到头秃也想不到的Vue3复用组件还可以这么hack的用法
这篇文章主要为大家介绍了想到头秃也想不到的Vue3复用组件还可以这么hack的用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04

基于Vue + ElementUI实现可编辑表格及校验

目录

效果

实现思路

实现细节讲解

完整代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具