element框架 el-table嵌套input 实现表单（pc端）

已于 2023-03-06 13:36:36 修改
阅读量4.8k 收藏 4
点赞数 3
文章标签： javascript vue.js elementui Powered by 金山文档
于 2023-03-06 11:10:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73267676/article/details/129356369
版权

运用到实际项目可能有帮助的点：

  1. el-table嵌套input的实际使用

  1. 多选和单选的答案排版显示切换

  1. v-model改变了但页面没渲染的解决方式

  1. 封装组件的思想

前几天做了一个表单组件 分享一下感受（vue2）

先上图

点击新增或者编辑会进入表单组件并且触发组件内的init方法，编辑会带该题的id，新建则是空。（父组件代码就不摆上来了）

子组件代码
<template>
    <transition name="el-zoom-in-center">
        <div class="JNPF-preview-main">
            <div class="JNPF-common-page-header">
                <el-page-header @back="goBack" :content="!dataForm.id ? '新建' : '编辑'" />
                <div class="options">
                    <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
                    <el-button @click="goBack">取 消</el-button>
                </div>
            </div>
            <div :style="{ margin: '0 auto', width: '100%' }">
                <el-row :gutter="15" class=" main">
                    <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right"
                        :rules="rules">
                        <el-col :span="24">
                            <el-form-item label="分类" prop="Category">
                                <el-select v-model='dataForm.Category' placeholder='请选择' clearable required
                                    :style='{ "width": "100%" }'>
                                    <el-option v-for="(item, index) in CategoryOptions" :key="index" :label="item.fullName"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="题型" prop="QuestionType">
                                <el-radio-group v-model='dataForm.QuestionType' @change="(e) => QuestionTypeIs(e)" required>
                                    <el-radio v-for="(item, index) in QuestionTypeOptions" :key="index" :label="item.id">{{
                                        item.fullName }} </el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="题干" prop="QuestionStem">
                                <el-input v-model='dataForm.QuestionStem' placeholder='请输入' clearable required
                                    :style='{ "width": "100%" }'>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="0">
                                <div class="JNPF-common-title">
                                    <h2>选项内容</h2>
                                </div>
                                <el-table :data="dataForm.Options" size='mini'>
                                    <el-table-column type="index" width="50" label="序号" align="center" />
                                    <el-table-column prop="Options" label="选项内容">
                                        <template slot="header">
                                            <span class="required-sign">*</span>选项内容
                                        </template>
                                        <template slot-scope="scope">
                                            <el-input v-model="dataForm.Options[scope.$index]" :style='{ "width": "100%" }'
                                                placeholder='请输入' clearable required>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="50">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="text" class="JNPF-table-delBtn"
                                                @click="handleDelEmaQuestionOptionEntityList(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="table-actions" @click="addHandleEmaQuestionOptionEntityList()">
                                    <el-button type="text" icon="el-icon-plus">新增</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="答案" prop="Answer" v-if="QuestionType == 1">
                                <el-select v-model='dataForm.Answer' placeholder='请选择' clearable required
                                    :style='{ "width": "100%" }'>
                                    <el-option v-for="(item, index) in dataForm.Options" :key="index" :label="index + 1"
                                        :value="index + 1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="答案" prop="Answer" v-if="QuestionType == 2">
                                <el-select v-model="dataForm.Answer" placeholder="请选择" :style='{ "width": "100%" }'
                                    clearable required multiple>
                                    <el-option v-for="(item, index) in dataForm.Options" :key="index" :label="index + 1"
                                        :value="index + 1">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="分值" prop="Point">
                                <el-input-number v-model='dataForm.Point' placeholder='数字文本' required :step='1'
                                    controls-position='right' :max='100' :min='1'>
                                </el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="是否有效" prop="F_EnabledMark">
                                <el-switch v-model='dataForm.F_EnabledMark' :active-value='1' :inactive-value='0'>
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if='false'>
                            <el-form-item label="创建用户" prop="F_CreatorUserId">
                                <jnpf-open-data v-model='dataForm.F_CreatorUserId' readonly type='currUser'>
                                </jnpf-open-data>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if='false'>
                            <el-form-item label="创建时间" prop="F_CreatorTime">
                                <jnpf-open-data v-model='dataForm.F_CreatorTime' readonly type='currTime'>
                                </jnpf-open-data>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if='false'>
                            <el-form-item label="修改用户" prop="F_LastModifyUserId">
                                <el-input v-model='dataForm.F_LastModifyUserId' placeholder='系统自动生成' readonly>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if='false'>
                            <el-form-item label="修改时间" prop="F_LastModifyTime">
                                <el-input :value='dataForm.f_LastModifyTime | toDate' placeholder='系统自动生成' readonly />
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
        </div>
    </transition>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
export default {
    components: {},
    props: [],
    data() {
        return {
            btnLoading: false,
            loading: false,
            visible: false,
            dataForm: {
                id: '',
                Category: '',
                QuestionType: "1",
                QuestionStem: '',
                Answer: [],
                Point: 5,
                F_EnabledMark: 0,
                F_CreatorUserId: '',
                F_CreatorTime: '',
                F_LastModifyUserId: '',
                F_LastModifyTime: '',
            },
            QuestionType: 1,
            rules: {
                Category: [
                    {
                        required: true,
                        message: '请输入分类',
                        trigger: 'change'
                    },
                ],
                QuestionType: [
                    {
                        required: true,
                        message: '请输入题型',
                        trigger: 'change'
                    },
                ],
                QuestionStem: [
                    {
                        required: true,
                        message: '请输入题干',
                        trigger: 'blur'
                    },
                ],
                Answer: [
                    {
                        required: true,
                        message: '请输入答案',
                        trigger: 'change'
                    },
                ],
                Point: [
                    {
                        required: true,
                        message: '请输入分值',
                        trigger: [
                            "blur",
                            "change"
                        ]
                    },
                ],
            },
            CategoryOptions: [],
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getcategoryOptions();
    },
    mounted() {
    },
    computed: {
    },
    watch: {
    },
    methods: {
        // 非空校验
        emaQuestionOptionExist() {
            let isOk = true;
            for (let i = 0; i < this.dataForm.Options.length; i++) {
                const e = this.dataForm.Options[i];
                if (!e) {
                    this.$message({
                        message: '选项内容不能为空',
                        type: 'error',
                        duration: 1000
                    });
                    isOk = false
                    break
                }
                if (this.QuestionType == 2) {
                    if (this.dataForm.Answer.length == 1) {
                        this.$message({
                            message: '多选题答案应为两个及以上',
                            type: 'error',
                            duration: 1000
                        });
                        isOk = false
                        break
                    }
                }
            }
            return isOk;
        },
        // 获取试题分类数据（消防安全等等..）
        getcategoryOptions() {
            getDictionaryDataSelector('397272689904988741').then(res => {
                this.CategoryOptions = res.data.list
            });
        },
        // 关闭
        goBack() {
            this.$emit('refresh')
        },
        // 点开
        init(id) {
            this.dataForm.id = id || '';
            this.visible = true;
            this.$nextTick(() => {
                this.$refs['elForm'].resetFields();
                this.dataForm.Options = [];
                // 编辑操作
                if (this.dataForm.id) {
                    request({
                        url: `api/visualdev/OnlineDev/380291022044793029/${this.dataForm.id}`,
                        method: 'get'
                    }).then(res => {
                        this.dataForm = res.data.data
                        this.dataForm.id = id || '';
                        this.dataForm.Answer = JSON.parse(this.dataForm.Answer);
                        this.QuestionType = this.dataForm.QuestionType || 1
                    })
                // 新建操作
                }else{
                    this.QuestionType = 1
                }
            });
            this.$store.commit('generator/UPDATE_RELATION_DATA', {})
        },
        // 多选单选切换
        QuestionTypeIs(e) {
            this.QuestionType = e
            if (e == 1) this.dataForm.Answer = ''
            if (e == 2) this.dataForm.Answer = []
        },
        // 提交确定
        dataFormSubmit() {
            this.$refs['elForm'].validate((valid) => {
                if (valid) {
                    if (!this.emaQuestionOptionExist()) return;
                    this.btnLoading = true;
                    this.dataForm.F_EnabledMark = parseInt(this.dataForm.F_EnabledMark)
                    this.dataForm.flowId = ''
                        // 新建提交确定
                    if (!this.dataForm.id) {
                        request({
                            url: `/api/visualdev/OnlineDev/380291022044793029/`,
                            method: 'post',
                            data: {
                                id: this.dataForm.id,
                                data: this.dataForm
                            }
                        }).then((res) => {
                            this.$message({
                                message: res.msg,
                                type: 'success',
                                duration: 1000,
                                onClose: () => {
                                    this.btnLoading = false;
                                    this.visible = false,
                                        this.$emit('refresh', true)
                                }
                            })
                        }).catch(() => {
                            this.btnLoading = false;
                        })
                    } else {
                        // 编辑提交确定
                        request({
                            url: `/api/visualdev/OnlineDev/380291022044793029/${this.dataForm.id}`,
                            method: 'PUT',
                            data: {
                                id: this.dataForm.id,
                                data: this.dataForm
                            }
                        }).then((res) => {
                            this.$message({
                                message: res.msg,
                                type: 'success',
                                duration: 1000,
                                onClose: () => {
                                    this.btnLoading = false;
                                    this.visible = false
                                    this.$emit('refresh', true)
                                }
                            })
                        }).catch(() => {
                            this.btnLoading = false;
                        })
                    }
                }
            })
        },
        // 选项新增
        addHandleEmaQuestionOptionEntityList() {
            let item = ''
            this.dataForm.Options.push(item)
            if (!this.dataForm.id) this.$forceUpdate()
        },
        // 选项删除
        handleDelEmaQuestionOptionEntityList(index) {
            this.dataForm.Options.splice(index, 1);
            if (!this.dataForm.id) this.$forceUpdate()
        },
    }
}
</script>
编辑实际图
新增实际图

代码不复杂 且都做了注释

主要是分享下el-table嵌套input项目中的实际运用（插槽的使用），还有怎么实现一个简洁可编辑响应式表单（新增 编辑 删除）的业务需求

其中需要注意的目前回忆起来有几点：

  1. el-select多选框的multiple属性（可多选）需要是一个数组，所以每次都需要切换

  1. 如果反复切换，数组和字符串的方法转化会多很多不要的标点符号，所以每次切换得清空值

  1. scope里的$index可以拿到循环里的下标

  1. 新建的时候选项的值更新了 但是没有进到dataForm.Options里面去 所以我用了this.$forceUpdate()。

第四点奇怪的是编辑时候是正常的 能同步到select去，但是新建就不行得用强制刷新，这个问题我还在疑惑，希望有大佬解惑。

三乌e
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
elementui中的tabel中使用input框实现表格数据编辑
m0_50441807的博客
04-26 5424
elementui中tabel组件点击编辑按钮后，里面的数据会变成一个input框，然后在input框中输入数据，即可完成表格的数据更新；
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 element[email protected]，使用前请熟悉： element[email protected] element[email protected] 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
ElementUI框架el-table组件中嵌入el-input输入框无法获取焦点、无法编辑问题
cd_yang2017的博客
03-08 766
el-table组件中嵌入el-input输入框无法获取焦点，无法编辑。可使用父元素监听方式获取焦点。
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
vue+element获取el-table某行的下标,根据下标操作数组对象方式
10-14
主要介绍了vue+element获取el-table某行的下标,根据下标操作数组对象方式，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element 表格套输入框
m0_64707449的博客
07-12 1757
【代码】element 表格套输入框。
在element的表格中添加编辑（input，输入框）
weixin_44732821的博客
08-10 7545
基于Element上在table中实现行数据单选、编辑
el-table表格中加入输入框
凡尘
09-14 2327
el-table表格中加入输入框。
element--el-table中写input标签
csstmg的博客
08-14 8272
<el-table v-if="form.addOrEditTransactionSalaryVo.isKpi===1" stripe border highlight-current-row :data="form.addOrEditTransactionSalaryVo.workTargetVoList" :max-height="300" > .
el-table嵌入输入框
weixin_59213769的博客
01-13 4425
el-table嵌入输入框
el-data-table:element基于element-ui，轻松实现结界
05-13
数据表 由axios自动请求，支持分页，树数据结构，自定义搜索，自定义操作列，这使得rest api很容易 :clapping_hands: 该表使用呈现表单。 目录 链接 安装 快速开始 全局寄存器组件 模板 参考 贡献 贡献者 执照 介绍 欺诈 创建el-data-table来解决业务问题，因此在其中设置了CRUD逻辑。 例如，要开发user api，请假设其相对路径如下： / api / v1 / users 宁静的CRUD API应该是： 取回 GET / api / v1 / users ? page = 1 & size = 10 默认数据结构 { "code" : 0 , "msg" : "ok" , "payload" : { "content" : [ ] , // dataPath "totalElements" : 2 , // totalPath
HTML中让表单input等文本框为只读不可编辑的方法
12-02
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国"> 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。 方法1: onfocus=this.blur() 当鼠标放不上就离开焦点<input type="text" name="input1" value="中国" onfocus=this.blur()> 方法2:readonly <input type="text" name="input1" value="中国" readonly> <input type="tex
vue修改Element的el-table样式的4种方法
10-14
主要介绍了vue修改Element的el-table样式的4种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 652
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 747
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 34
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 890
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1212
vue2,vuex,vant组件库
el-table中使用el-input
08-18
在el-table中使用el-input进行编辑时，可以根据需要添加错误提示信息。可以通过以下解决方案来实现： 1. 首先，为el-table的每列添加el-input组件。可以使用v-model指令绑定每列的值。 2. 对于需要错误提示的列，在el-input上添加一个错误提示的元素，比如一个图标或文字。 3. 在el-input的值改变时，可以使用@input事件监听输入。可以在这个事件处理函数中进行验证逻辑。 4. 在验证逻辑中，可以使用正则表达式来验证输入的内容是否符合要求。如果不符合要求，可以设置错误提示的内容，然后显示错误提示。 参考代码如下： ``` <el-table :data="tableData"> <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <el-input v-model="scope.row.name" @input="validateInput(scope.row)"></el-input> <span v-if="scope.row.showErr" class="error-message">{{ scope.row.errMsg }}</span> </template> </el-table-column> <!-- 其他列的定义 --> </el-table> ``` ``` methods: { validateInput(row) { if (!row.name) { row.errMsg = '请输入名称'; row.showErr = true; } else { row.errMsg = ''; row.showErr = false; } } } ``` 这样，在el-table中使用el-input进行编辑时，可以实现错误提示的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [el-table表格修改每列使用el-input对其做错误提示](https://blog.csdn.net/migexiaoliang/article/details/126236093)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [【elementui】el-table中的el-input校验](https://blog.csdn.net/bidepanm/article/details/126172141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值