【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑,点击单元格变成输入框修改数据

这篇具有很好参考价值的文章主要介绍了【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑,点击单元格变成输入框修改数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

点击单元格出现弹框修改数据版本

这里考虑到有些时候可能想要点击单元格不只修改一个数据,可能是一个多个数据都需要修改。
这时候只能用表单了,所以这里输入框就有限制不好用了。我就又写了个模板,是点击单元格后出现弹框的,内部可以表单修改
点击这里跳转

效果图

element表格点击单元格可编辑,功能实现,vue.js,前端,javascript,表格单元格编辑,elementui

代码

我这里是用的html的形式,引入了vue的语法使用的
各位自行在自己的代码中套用。和vue写法一样
然后核心就是注意那个@cell-click=‘getCell’ :cell-class-name=‘getRowColumn’
这两个方法解释:
cell-class-name:其实就是通过创建table时触发的把角标赋值给行和列方便后面使用
cell-click:就是点击单元格时触发的事件,可以通过这个拿到角标
然后我们通过点击v-if判断当前单元格位置的角标和我们点击的角标一致就显示不然就隐藏
这就实现了切换输入框的功能,然后给文字div加个点击事件,方便我们获取到数据,用于判断需要调用新增还是修改方法文章来源地址https://www.toymoban.com/news/detail-703739.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 公共css文件 -->
    <link rel="stylesheet" href="/statics/css/common/common.css">
    <!-- 公共js文件 -->
    <script type="text/javascript" src="/statics/vue_element/common.js"></script>
    <!-- vue方面文件 -->
    <link rel="stylesheet" href="/statics/vue_element/element.css">
    <script src="/statics/vue_element/vue.js"></script>
    <script src="/statics/vue_element/element.js"></script>
    <script src="/statics/vue_element/axios.js"></script>
    <title>表格单元格输入框修改</title>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 搜索栏 -->
        <div class="search_main">
            <div class="ibox-search" ref="menus">
                <el-form :inline="true" class="form-inline">
                    <el-form-item label="排班日期">
                        <el-date-picker v-model="time" size="small" type="month" placeholder="选择日期"
                            value-format="yyyy-MM" clearable id="month1" class="ywidth">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" @click="search" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 内容栏 -->
        <div class="layout-main">
            <div class="ibox-search">
                <!-- 循环表头 -->
                <el-table :data="tableData" border style="width: 100%" v-loading="loadings" :height="height" ref="table"
                    @cell-click='getCell' :cell-class-name='getRowColumn'>
                    <el-table-column v-for="(arrd,index) in headered" :fixed="arrd.fixed" :key="index"
                        :label="arrd.name" align="center" show-overflow-tooltip :prop="arrd.key"
                        :width="arrd.key=='ks'||arrd.key=='doctor'?'100px':''">
                        <template slot-scope='scope'>
                            <!-- 列不等于科室和医生的才有输入框 -->
                            <div v-if="arrd.key!=='ks'&&arrd.key!=='doctor'">
                                <el-input v-model='scope.row[arrd.key]'
                                    v-if='scope.row.index == tabRowIndex  && scope.column.index == tabColumnIndex'
                                    @blur='inputBlur' size="mini" v-focus></el-input>
                                <div v-else style="cursor: pointer;" @click="inputType(scope.row[arrd.key])">
                                    {{scope.row[arrd.key]}}</div>
                            </div>
                            <div v-else>
                                {{scope.row[arrd.key]}}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="list-footer" ref="footer">
                    <div class="foot-bg">
                    </div>
                    <div class="block page_r">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper" :total="count">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        directives: {
            //注册一个局部的自定义指令 v-focus,输入框自动聚焦
            focus: {
                inserted: function (el) {
                    el.querySelector('input').focus()
                }
            }
        },
        data() {
            return {
                time: '', //日期
                tableData: [{
                    "ks": "中医科",
                    "doctor": "段占国",
                    "num1": 0,
                    "num2": 0,
                    "num3": 0,
                    "num4": 0,
                    "num5": 0,
                    "num6": 0,
                    "num7": 0,
                    "num8": 0,
                    "num9": 0,
                    "num10": 0,
                    "num11": 0,
                    "num12": 0,
                    "num13": 0,
                    "num14": 0,
                    "num15": 0,
                    "num16": 0,
                    "num17": 0,
                    "num18": 0,
                    "num19": 0,
                    "num20": 0,
                    "num21": 0,
                    "num22": 0,
                    "num23": 0,
                    "num24": 0,
                    "num25": 0,
                    "num26": 0,
                    "num27": 0,
                    "num28": 0,
                    "index": 0
                }, {
                    "ks": "中医科",
                    "doctor": "陈森",
                    "num1": 0,
                    "num2": 0,
                    "num3": 0,
                    "num4": 0,
                    "num5": 0,
                    "num6": 0,
                    "num7": 0,
                    "num8": 0,
                    "num9": 0,
                    "num10": 0,
                    "num11": 0,
                    "num12": 0,
                    "num13": 0,
                    "num14": 0,
                    "num15": 0,
                    "num16": 0,
                    "num17": 0,
                    "num18": 0,
                    "num19": 0,
                    "num20": 0,
                    "num21": 0,
                    "num22": 0,
                    "num23": 0,
                    "num24": 0,
                    "num25": 0,
                    "num26": 0,
                    "num27": 0,
                    "num28": 0,
                    "index": 1
                }], //表格数据
                headered: [{
                        "key": "ks",
                        "name": "科室"
                    },
                    {
                        "key": "doctor",
                        "name": "专家"
                    },
                    {
                        "key": "num1",
                        "name": "2023-02-01"
                    },
                    {
                        "key": "num2",
                        "name": "2023-02-02"
                    },
                    {
                        "key": "num3",
                        "name": "2023-02-03"
                    },
                    {
                        "key": "num4",
                        "name": "2023-02-04"
                    },
                    {
                        "key": "num5",
                        "name": "2023-02-05"
                    },
                    {
                        "key": "num6",
                        "name": "2023-02-06"
                    },
                    {
                        "key": "num7",
                        "name": "2023-02-07"
                    },
                    {
                        "key": "num8",
                        "name": "2023-02-08"
                    },
                    {
                        "key": "num9",
                        "name": "2023-02-09"
                    },
                    {
                        "key": "num10",
                        "name": "2023-02-10"
                    },
                    {
                        "key": "num11",
                        "name": "2023-02-11"
                    },
                    {
                        "key": "num12",
                        "name": "2023-02-12"
                    },
                    {
                        "key": "num13",
                        "name": "2023-02-13"
                    },
                    {
                        "key": "num14",
                        "name": "2023-02-14"
                    },
                    {
                        "key": "num15",
                        "name": "2023-02-15"
                    },
                    {
                        "key": "num16",
                        "name": "2023-02-16"
                    },
                    {
                        "key": "num17",
                        "name": "2023-02-17"
                    },
                    {
                        "key": "num18",
                        "name": "2023-02-18"
                    },
                    {
                        "key": "num19",
                        "name": "2023-02-19"
                    },
                    {
                        "key": "num20",
                        "name": "2023-02-20"
                    },
                    {
                        "key": "num21",
                        "name": "2023-02-21"
                    },
                    {
                        "key": "num22",
                        "name": "2023-02-22"
                    },
                    {
                        "key": "num23",
                        "name": "2023-02-23"
                    },
                    {
                        "key": "num24",
                        "name": "2023-02-24"
                    },
                    {
                        "key": "num25",
                        "name": "2023-02-25"
                    },
                    {
                        "key": "num26",
                        "name": "2023-02-26"
                    },
                    {
                        "key": "num27",
                        "name": "2023-02-27"
                    },
                    {
                        "key": "num28",
                        "name": "2023-02-28"
                    }
                ],
                loadings: false, //表格加载
                height: null, //表格高度
                // 分页部分
                currentPage: 1,
                pagesize: 10,
                count: 0,
                //表单验证
                value: '', //区分新增和修改
                tabRowIndex: null, //行角标
                tabColumnIndex: '', //列角标
            }
        },
        mounted() {
            let that = this
            that.initTableHeight() //初始化 表格高度
            window.addEventListener('resize', this.initTableHeight) //动态表格高度监听
            that.time = timer.benyuefen() //初始化默认获取本月日期,不含日
            //that.searchList() //初始化表格数据获取
        },
        methods: {
            // 保存数据区分新增和修改
            inputType(num) {
                this.value = num
            },
            // 获取点击的单元格角标位置
            getCell(row, column, cell, event) {
                this.tabRowIndex = row.index
                this.tabColumnIndex = column.index
            },
            // 把角标赋值给行和列,上面才可以直接拿到点击位置的坐标
            getRowColumn({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                row.index = rowIndex
                column.index = columnIndex
            },
            // 失去光标
            inputBlur() {
                // 把输入框隐藏
                this.tabRowIndex = null
                this.tabColumnIndex = ''
                // 发请求把修改的数据发送给后台
                // this.subForm()
            },
            // 表格高度
            initTableHeight() {
                let that = this
                var menus = that.$refs.menus.offsetHeight //搜索栏高度
                var footer = that.$refs.footer.offsetHeight //分页高度
                that.height = window.innerHeight - menus - footer - 25 + 'px'
            },
            // 获取表格数据
            searchList() {
                let that = this
                that.loadings = true
                axios.get(apiadmin_url + `zkjk_doctor_limit?month=${that.time}`, {
                    headers: {
                        token: session_token,
                        hosId: userinfo.hospital_id,
                    }
                }).then(res => {
                    console.log(res, 'res');
                    this.headered = res.data.data.header
                    this.tableData = res.data.data.data
                    this.tableData.sort(function (a, b) {
                        return a.ks > b.ks ? 1 : -1
                    })
                    that.loadings = false
                }).catch(error => {})
            },
            // 搜索按钮
            search() {
                let that = this
                that.currentPage = 1
                console.log(this.time, '时间');
                that.searchList()
            },
            // 分页
            handleSizeChange(val) {
                let that = this
                that.pagesize = val;
                that.searchList()
            },
            // 分页
            handleCurrentChange(val) {
                let that = this
                that.currentPage = val;
                that.searchList()
            },
            // 弹框内提交
            subForm() {
                let that = this
                if (this.value == 0) {
                    axios.post(apiadmin_url + "zkjk_doctor_limit", {
                        date: this.tableTimer,
                        doctor: this.nickName,
                        limit_num: this.ruleForm.show_num
                    }, {
                        headers: {
                            token: session_token,
                            hosId: userinfo.hospital_id,
                        }
                    }).then(response => {
                        if (response.data.code == 200) {
                            that.dialogVisible = false
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: response.data.message
                            });
                            that.search()
                        } else {
                            this.$message({
                                showClose: true,
                                message: response.data.message,
                                type: 'error'
                            });
                        }
                    }).catch(error => {})
                } else {
                    axios.put(apiadmin_url +
                        `zkjk_doctor_limit/1?date=${this.tableTimer}&doctor=${this.nickName}&limit_num=${this.ruleForm.show_num}`, {}, {
                            headers: {
                                token: session_token,
                                hosId: userinfo.hospital_id,
                            }
                        }).then(response => {
                        if (response.data.code == 200) {
                            that.dialogVisible = false
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: response.data.message
                            });
                            that.search()
                        } else {
                            this.$message({
                                showClose: true,
                                message: response.data.message,
                                type: 'error'
                            });
                        }
                    }).catch(error => {})
                }
            },
        }
    })
</script>

</html>

到了这里,关于【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑,点击单元格变成输入框修改数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

    1、如果单元格编辑使用了插槽功能,需要在插槽上添加一个class(这个类即:当前列的porp值) 2、porp不能重复(正常也不会存在) GitHub源码地址 Gitee源码地址 基于ElementUi或Antd再次封装基础组件文档 TTable组件封装地址

    2024年02月11日
    浏览(65)
  • vxe-table表格合并单元格和编辑

    //这是在vue上面引用vxe-table插件实现的,主要方法都设置在table中,mergeCells,tableData都是在vue页面的data初使化数据, :footer-method=“footerMethod”:尾部数据,:merge-footer-items=“mergeCells”:尾部合并单元格。vxe-table网址:https://vxetable.cn/#/table/advanced/footerSpan

    2023年04月09日
    浏览(46)
  • ElementUI table表格组件实现双击编辑单元格失去焦点还原,支持多单元格

    在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态,失去焦点时还原表格显示。 实现思路: 在数据中增加 isFocus:false .控制是否显示 在table中用 @cell-dblclick 双击方法 先看效果: 上源码:在表格模板中用scope.row.isFocus focusLabelName==\\\'姓名1控制多个单元格显示 方法:

    2024年02月21日
    浏览(47)
  • vue可编辑表格

    内容包含:校验。下拉框。输入框。日期控件 效果图   1.代码目录 2.index.js  3.utilsjs 4.editable-column.vue 5.editable.vue 6.使用 方法  

    2024年02月11日
    浏览(37)
  • 使用socket.io简单实现多客户端可编辑表格

    之前看了B站小野森森老师的可编辑表格的视频深受启发,今天使用React简单实现一下。 当处于编辑状态的时候,自己和其他人可以看到; 编辑内容后,自己及其他人可以同步看到修改后的内容; 后端服务,使用socket.io起一个后端服务,用于监听连接和发送数据; 前端准备:

    2024年02月06日
    浏览(49)
  • vue3表格,编辑案例

    index.vue edit.vue

    2024年02月13日
    浏览(33)
  • 记录--极致舒适的Vue可编辑表格

    使用ElementPlus的Table啥都好,就是没有可编辑表格!!!😭 既然UI库不支持,那我们实现一个可编辑表格是很难的事么?😒难么?😢不难么?... 个人觉得如果是业务固定的可编辑表格,使用ElementPlus实现都不难。但是如果需要的是一个通用的可编辑表格,这好像还真说不好。

    2024年02月08日
    浏览(29)
  • Vue+element UI 可编辑表格

    前端开发过程中,我们都会尽量避免多层弹窗的嵌套,最多两层弹窗嵌套。这么做的原因是为了方便管理代码和防止多层嵌套弹窗造成bug。但是有时候,内层的弹窗可能展示了一个表格,并且需要操作表格中的数据,这个时候我们只能自己DIY一个表格,取代弹窗处理的方法。

    2024年02月04日
    浏览(53)
  • 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日
    浏览(54)
  • Vue + ElementUI 实现可编辑表格及校验

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

    2024年02月14日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包