记录--极致舒适的Vue可编辑表格

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

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--极致舒适的Vue可编辑表格

使用ElementPlus的Table啥都好,就是没有可编辑表格!!!😭

既然UI库不支持,那我们实现一个可编辑表格是很难的事么?😒难么?😢不难么?...

个人觉得如果是业务固定的可编辑表格,使用ElementPlus实现都不难。但是如果需要的是一个通用的可编辑表格,这好像还真说不好。

对于通用的可编辑表格,网上的实现方案也是五花八门,但是看下来多少都有些问题。个人认为一个通用的可编辑表格需要给使用方提供以下能力:

  • 支持新增、删除、编辑、保存
  • 定义可编辑列
  • 定义表单组件,既可以是原生标签,也可以是自定义组件
  • 定义表单校验规则
  • 定义数据展示部分
  • 定义操作区域
  • 几乎无学习成本

实现了以上需求的可编表格,就可以满足基本的生产需求了。

<el-table>组件的基础上实现可编辑表格,保留<el-table>的使用方式不变,还能提供可编辑功能。同时可编辑功能的配置与<el-table>的使用风格一致,降低学习成本。

放心食用:演示地址

准备数据

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

基础表格

基础表格的用法与<el-table>几乎没有区别,唯一的不同就是<el-table>中的data,在<EditTable>中被data-source替换。

记录--极致舒适的Vue可编辑表格

<section>
  <h1>无编辑效果</h1>
  <EditTable class="edit-table" :data-source="tableData">
    <EditTableColumn prop="date" label="时间"> </EditTableColumn>
    <EditTableColumn prop="name" label="姓名"> </EditTableColumn>
    <EditTableColumn prop="address" label="地址"> </EditTableColumn>
  </EditTable>
</section>

可修改表格

<EditTableColumn>存在一个#default默认插槽和一个#edit具名插槽,默认插槽和具名插槽都提供了rowactions$index等值。

可修改表格是在基础表格上给<EditTableColumn>添加名为edit的具名插槽<template #edit>

  • 通过row可以获取到当前行的数据。插槽中的表单组件可通过v-model="row.*"对编辑值进行双向绑定。
  • 通过actions可以获取编辑表格的能力,通过action.startEditable($index)开启编辑,action.cancelEditable($index)取消编辑,action.saveEditable保存编辑。

记录--极致舒适的Vue可编辑表格

<section>
  <h1>可编辑效果</h1>
  <EditTable class="edit-table" :data-source="tableData">
    <EditTableColumn prop="date" label="时间">
      <template #edit="{ row }">
        <input v-model="row.date" />
      </template>
    </EditTableColumn>
    <EditTableColumn prop="name" label="姓名">
      <template #edit="{ row }">
        <input v-model="row.name" />
      </template>
    </EditTableColumn>
    <EditTableColumn prop="address" label="地址">
      <template #edit="{ row }">
        <input v-model="row.address" />
      </template>
    </EditTableColumn>
    <EditTableColumn label="操作">
      <template #default="{ actions, $index }">
        <button @click="actions.startEditable($index)">操作</button>
      </template>
      <template #edit="{ actions, $index }">
        <button @click="actions.saveEditable($index)">保存</button>
        <button @click="actions.cancelEditable($index)">取消</button>
      </template>
    </EditTableColumn>
  </EditTable>
</section>

删除效果

在上述表格的操作区域增加删除按钮,删除按钮点击时调用actions.delete($index)用来删除当前行。

记录--极致舒适的Vue可编辑表格

<section>
  <h1>删除效果</h1>
  <EditTable class="edit-table" :data-source="tableData">
    <EditTableColumn prop="date" label="时间">
      <template #edit="{ row }">
        <input v-model="row.date" />
      </template>
    </EditTableColumn>
    <EditTableColumn prop="name" label="姓名">
      <template #edit="{ row }">
        <input v-model="row.name" />
      </template>
    </EditTableColumn>
    <EditTableColumn prop="address" label="地址">
      <template #edit="{ row }">
        <input v-model="row.address" />
      </template>
    </EditTableColumn>
    <EditTableColumn label="操作">
      <template #default="{ actions, $index }">
        <button @click="actions.startEditable($index)">操作</button>
        <button @click="actions.deleteRow($index)">删除</button>
      </template>
      <template #edit="{ actions, $index }">
        <button @click="actions.saveEditable($index)">保存</button>
        <button @click="actions.cancelEditable($index)">取消</button>
        <button @click="actions.deleteRow($index)">删除</button>
      </template>
    </EditTableColumn>
  </EditTable>
</section>

新增效果

组件<EditTable>并不需要提供新增按钮,如果直接将新增按钮封装在组件内,那么这个组件就太呆了。因此<EditTable>只提供了actions.addRow方法,调用方可以根据自己的需求完成新增功能。

记录--极致舒适的Vue可编辑表格

<script lang="ts" setup>
import { ref } from 'vue';

import EditTable from '@/components/EditTable.vue';
import EditTableColumn from '@/components/EditTableColumn.vue';

const tableData = [...];

const addEditTableRef = ref<InstanceType<typeof EditTable>>();
</script>

<template>
  <div class="wrapper">
    <section>
      <h1>新增效果</h1>
      <EditTable ref="addEditTableRef" class="edit-table" :data-source="tableData">
        <EditTableColumn prop="date" label="时间">
          <template #edit="{ row }">
            <input v-model="row.date" />
          </template>
        </EditTableColumn>
        <EditTableColumn prop="name" label="姓名">
          <template #edit="{ row }">
            <input v-model="row.name" />
          </template>
        </EditTableColumn>
        <EditTableColumn prop="address" label="地址">
          <template #edit="{ row }">
            <input v-model="row.address" />
          </template>
        </EditTableColumn>
        <EditTableColumn label="操作">
          <template #default="{ actions, $index }">
            <button @click="actions.startEditable($index)">操作</button>
            <button @click="actions.deleteRow($index)">删除</button>
          </template>
          <template #edit="{ actions, $index }">
            <button @click="actions.saveEditable($index)">保存</button>
            <button @click="actions.cancelEditable($index)">取消</button>
            <button @click="actions.deleteRow($index)">删除</button>
          </template>
        </EditTableColumn>
      </EditTable>
      <button @click="addEditTableRef?.editActions.addRow()">新增</button>
    </section>
  </div>
</template>

表单校验

组件<EditTableColumn>允许验证用户的输入是否符合规范,来找到和纠正错误。只需要为<EditTableColumn :rules="rules">rules属性传入约定的验证规则,高级用法可参考async-validator

总之校验规则和表单的校验规则一致。

记录--极致舒适的Vue可编辑表格

<section>
  <h1>表单校验效果</h1>
  <EditTable ref="formEditTableRef" class="edit-table" :data-source="tableData">
    <EditTableColumn
      prop="date"
      label="时间"
      :rules="[{ required: true, message: '时间是必填项', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.date" />
      </template>
    </EditTableColumn>
    <EditTableColumn
      prop="name"
      label="姓名"
      :rules="[{ required: true, message: '姓名是必填项', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.name" />
      </template>
    </EditTableColumn>
    <EditTableColumn
      prop="address"
      label="地址"
      :rules="[{ required: true, message: '地址是必填项', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.address" />
      </template>
    </EditTableColumn>
    <EditTableColumn label="操作">
      <template #default="{ actions, $index }">
        <button @click="actions.startEditable($index)">操作</button>
        <button @click="actions.deleteRow($index)">删除</button>
      </template>
      <template #edit="{ actions, $index }">
        <button @click="actions.saveEditable($index)">保存</button>
        <button @click="actions.cancelEditable($index)">取消</button>
        <button @click="actions.deleteRow($index)">删除</button>
      </template>
    </EditTableColumn>
  </EditTable>
  <button @click="formEditTableRef?.editActions.addRow()">新增</button>
</section>

获取编辑后的表单数据

组件<EditTable>对外暴露了resultData响应式对象,可以用来获取表格的最新数据。

记录--极致舒适的Vue可编辑表格

<section>
  <h1>获取编辑结果</h1>
  <EditTable ref="formEditTableRef" class="edit-table" :data-source="tableData">
    <EditTableColumn
      prop="date"
      label="时间"
      :rules="[{ required: true, message: '时间是必填项', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.date" />
      </template>
    </EditTableColumn>
    <EditTableColumn
      prop="name"
      label="姓名"
      :rules="[{ required: true, message: '姓名是必填项', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.name" />
      </template>
    </EditTableColumn>
    <EditTableColumn
      prop="address"
      label="地址"
      :rules="[{ required: true, message: '地址是必填项', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.address" />
      </template>
    </EditTableColumn>
    <EditTableColumn label="操作">
      <template #default="{ actions, $index }">
        <button @click="actions.startEditable($index)">操作</button>
        <button @click="actions.deleteRow($index)">删除</button>
      </template>
      <template #edit="{ actions, $index }">
        <button @click="actions.saveEditable($index)">保存</button>
        <button @click="actions.cancelEditable($index)">取消</button>
        <button @click="actions.deleteRow($index)">删除</button>
      </template>
    </EditTableColumn>
  </EditTable>
  <button @click="formEditTableRef?.editActions.addRow()">新增</button>
  <p>获取数据:{{ formEditTableRef?.resultData }}</p>
</section>

另一种数据配置

组件<EditTable>除了支持data-source的方式配置数据外,还支持request属性传入返回数据的函数。

记录--极致舒适的Vue可编辑表格

<script lang="ts" setup name="Page-B">
import { ref } from 'vue';

import EditTable from '@/components/EditTable.vue';
import EditTableColumn from '@/components/EditTableColumn.vue';

const loadData = async () => [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
</script>

<template>
  <div class="wrapper">
    <section>
      <h1>另一种数据配置</h1>
      <EditTable class="edit-table" :request="loadData">
        <EditTableColumn prop="date" label="时间"> </EditTableColumn>
        <EditTableColumn prop="name" label="姓名"> </EditTableColumn>
        <EditTableColumn prop="address" label="地址"> </EditTableColumn>
      </EditTable>
    </section>
  </div>
</template>

关于源码

由于就是一个简单的组件实现,所以也懒得去打包发布npm。直接在下面给出demo地址和演示环境:

GitHub地址

codesandbox

最后

<el-table>的属性配置基本都可以在<EditTable>中使用,所以只要会使用el-table对于<EditTable>就可以立即使用。

本文转载于:

https://juejin.cn/post/7242140832379584567

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--极致舒适的Vue可编辑表格文章来源地址https://www.toymoban.com/news/detail-482418.html

到了这里,关于记录--极致舒适的Vue可编辑表格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue动态多级表头+行列合计+可编辑表格

    新建组件:Table.vue 新建组件: 可参考链接 https://blog.csdn.net/weixin_45275107/article/details/127509100 https://blog.csdn.net/weixin_39166851/article/details/130765957 https://blog.csdn.net/m0_67841039/article/details/131308126 https://blog.csdn.net/weixin_40881970/article/details/124699566

    2024年02月16日
    浏览(55)
  • Vue + ElementUI 实现可编辑表格及校验

    完整代码见文末 使用两个表单分别用于实现修改和新增处理。 通过一个 editIndex 变量判断是否是编辑状态来决定是否展示输入框,当点击指定行的修改后进行设置即可: 通过隐藏表头实现新增表格和修改表格的合并,同时表格数据只有 addRow : 当无数据时只展示新增行: 通

    2024年02月14日
    浏览(40)
  • Vue+Element UI弹窗实现表格编辑

    点击编辑按钮弹出Dialog js如下 时间格式化 3.1 方法一

    2024年02月12日
    浏览(42)
  • vue+element-ui+springboot 在线表格编辑

    方法: 编辑excel 格式为需要的样子,另存为html 打开files文件,复制html部分代码和样式到vue文件 将需要编辑的部分使用控件填入 代码: 特别地: 服装列数可变,需要动态变换,同时有的可编辑,有的不可编辑 增加表格行数,可通过增加memberList 数据进行动态添加和删除,无

    2024年01月24日
    浏览(50)
  • 【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑,点击单元格变成输入框修改数据

    这是最近遇到的功能,经常会需要一个表格可以编辑数据 类似于excel那种点击一下单元格就可以编辑数据,修改后鼠标移动出去 光标消失就会保存数据给后台 这里记录一下实现方法,其实也比较简单 就是通过角标来判断显示隐藏的 这里考虑到有些时候可能想要点击单元格不

    2024年02月09日
    浏览(44)
  • 【Vue/element】 el-table实现表格动态新增/插入/删除 表格行,可编辑单元格

    效果如下: 点击“新增一行”可以在表格最后新增一行,单元格内容可编辑 点击绿色+按钮,可在指定行的后面插入一行 点击红色-按钮,可以删除指定行 原理:表格 el-table 是通过动态循环 tableData 生成,只要对 tableData 数组进行增加删除元素,就可以达到效果 这里用了ele

    2024年02月16日
    浏览(63)
  • 使用vue-easytable实现仿excel表格,支持可编辑、添加删除行、虚拟表格等功能

    使用npm安装vue-easytable 在 main.js 中写入以下内容: 代码实现 效果  表格配置 参数 说明 类型 可选值 默认值 tableData 表格数据 Array - - footerData 表格footer 汇总数据,数据结构和 tableData 一致 Array - - columns 列配置,具体项见下表 columns 配置 Array - - showHeader 是否展示表头 Boolean -

    2024年02月08日
    浏览(56)
  • ant-design-vue表格Table行内新增、编辑、删除

    ant-design-vue表格Table进行单元格内新增、编辑、删除等操作 如图所示:

    2024年02月14日
    浏览(44)
  • Ant Design Vue实现表格双击编辑、添加新行、文字提示

    早上刚上班,产品就朝我工位走了过来,一看大事不好,肯定又是来提需求的! 产品:做一个表格,要实现双击编辑的功能 我:做不了 产品:老板提的 我:好的,可以做 老板提的不能做也滴做😂 申明:项目基于Vue+Ant Design实现 想要实现双击编辑单元格,先开发一个简单的

    2024年02月11日
    浏览(49)
  • vue-quill-editor富文本编辑器-扩展表格、图片调整大小

    上篇文章已经讲到、vue-quill-editor的基本配置和图片转成url 这篇文章主要使用插件来完成 图片调整大小 和 表格的插件使用( 这两个目前quill 版本并不兼容 如果有大神解决了还望指点 ) 参考文章: vue-quill-editor 富文本编辑器支持图片拖拽和放大缩小_*且听风吟的博客-CSDN博

    2024年02月04日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包