iview可编辑表格组件封装

最新推荐文章于 2024-08-15 14:19:35 发布

置顶

N1qiugu

最新推荐文章于 2024-08-15 14:19:35 发布

阅读量8.6k

点赞数 1

分类专栏： vue iview 文章标签： iview可编辑表格

本文链接：https://blog.csdn.net/Ningqiugu/article/details/83314644

版权

本文记录了作者在学习iview框架时，针对公司项目需求自封装的可编辑表格组件。组件实现了整行编辑功能，通过vue的render函数处理自定义列渲染。文章详述了组件设计思路、遇到的挑战以及解决方法，包括编辑状态管理、数据同步、保存与取消操作的逻辑。此外，还提及了合计行的实现以及组件复用的考虑。虽然存在数据流混乱的问题，但为了提高代码复用性，作者仍然选择封装组件。

摘要由CSDN通过智能技术生成

因为公司需要尝试新的UI框架，因此自己也是学习了iview这个新的框架，之前一直都是用的element-ui，正好公司项目用到可编辑表格这样的组件，但是网上也是搜不到相关的资料，所以自己在参考了iview-admin的一些方法之后，自己写了一个，当然这个组件还是有一些缺陷后面会说到，本篇就是记录一下自己学习新的ui框架的一个过程。

首先自己希望的可编辑的表格是这样的一种形式。
在这里插入图片描述

就是这样的整行可以点击编辑的样式，看似好像很简单，但是其中有非常多的坑。首先按照自己的想法，就是讲表格中显示编辑和实际数据的地方抽象出来成为一个组件

//	inputEdit.vue
<template>
    <div>
        <div v-if="params.column.options === 'handle'">
          <div v-show="editIndex !== params.index" class="handle">
            <Button @click="startEdit" type="default" size="small">编辑</Button>
            <Poptip 
                confirm
                title="确认删除"
                @on-ok="deleteData">
                <Button type="default" size="small">删除</Button>
            </Poptip>
          </div>
          <div v-show="editIndex === params.index" class="handle">
            <Button @click="saveEdit" type="default" size="small">保存</Button>
            <Button @click="cancelEdit" type="default" size="small">取消</Button>
          </div>
        </div>
        <div class="tables-edit-outer" v-else>
            <div class="tables-edit-con" v-show="editIndex !== params.index">
                <span class="value-con">{
  {value}}</span>
            </div>
            <div class="tables-editting-con" v-show="editIndex === params.index">
                <Input 
                    v-show="params.column.options === 'input'"
                    v-model="params.row[params.column.key]"
                    @on-change="handleChange"
                    :maxlength='25'
                    placeholder="请输入内容">
                </Input>
                <Select 
                    v-show="params.column.options === 'select'"
                    v-model="params.row[params.column.key]"
                    @on-change="handleChange">
                    <Option 
                        v-for="(item, index) in options" 
                        :key="index" 
                        :value="item.label">
                        {
  {item.value}}
                    </O