22.elementUi相关问题（循环表单验证）

最新推荐文章于 2024-10-30 17:42:33 发布

寒墨茗殇

最新推荐文章于 2024-10-30 17:42:33 发布

阅读量50

点赞数

文章标签： elementui vue.js 前端 javascript ecmascript

本文链接：https://blog.csdn.net/qq_40591925/article/details/132973138

版权

本文介绍了如何解决ElementUI组件如Tabs、Radio和Dropdown出现的蓝色边框问题，提供了相应的CSS解决方案。此外，详细展示了在表单中进行循环验证的方法，包括如何动态循环创建表单元素，设置prop和rules，以及处理回车键刷新页面的问题。还提到了去除输入框上下箭头的技巧，并给出了相应的CSS样式。

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

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

Elementui蓝色阴影边框相关问题的解决方案

1.Tabs标签页出现蓝色阴影边框解决方案 css .el-tabs__item:focus.is-active.is-focus:not(:active) { -webkit-box-shadow: none !important; box-shadow: none !important; } .el-tabs__item,.el-tabs__item:focus,.el-tabs__item:focus-visible{ outline: transparent auto 0px !important; }

2.el-button-radio出现蓝色阴影边框解决方案 css .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) { -webkit-box-shadow: none !important; box-shadow: none !important; } .el-radio-button,.el-radio-button:focus,.el-radio-button:focus-visible{ outline: transparent auto 0px !important; }
3.el-dropdown 下拉菜单出现蓝色阴影边框解决方案 css .el-dropdown-link,.el-dropdown-link:focus,.el-dropdown-link:focus-visible { outline: transparent auto 0px !important; }

Element循环表单验证

1.表单格式

如果form表单里面的数据存在数组循环，那么我们又通过rules验证,那么就需要循环表单(如下)

```html
<template>
    <div>
        <el-form ref='formCase' label-width="150px" :model="fromList" :rules="fromeRules">
            <div v-for="(itemList,index) in fromList.valueArray" :key="index">
                <el-form-item label="测试一" :prop="'valueArray.'+index+'.value1'" :rules="fromeRules.adName">
                    <el-input v-model="itemList.value1" :placeholder="测试一"></el-input>
                </el-form-item>
            <div>
        </el-form>
        <button @click='clickBtn'></button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            fromList:{
                valueArray:[
                    {
                        value1:'xxx'
                    },
                    {
                        value1:'xxx'
                    },
                ]
            },
            fromeRules:{
                adName: {
                    required: true,
                    message: '此项不能为空',
                    trigger: 'blur'
                },
            },
        }
    },
    methods:{
        clickBtn() {
            this.$refs['formCase'].validate((valid) => {

            })
        }
    }
}
</script>
```

2.首先我们需要循环数组，实现表单循环 html <div v-for="(itemList,index) in fromList.valueArray" :key="index"> <el-form-item label="测试一" :prop="'valueArray.'+index+'.value1'" :rules="fromeRules.adName"> <el-input v-model="itemList.value1" :placeholder="测试一"></el-input> </el-form-item> <div>
3.然后我们需要在prop时使用数组名称+index+具体参数,同时rules规则需要单独配置，接着v-model需要双向绑定对应的值

4.最后，valueArray这个最好是一开始就有一组默认为空的数组，否则双向绑定、验证会失败，如果需要动态新增可以使用this.fromList.valueArray.push(this.$options.data.call(this).fromList.valueArray[0]) javascript fromList:{ valueArray:[ { value1:'xxx',//默认的 }, ] },

Form下面只有一个 input 时回车键刷新页面

需要使用`@keyup.enter.native`

```html
 <el-input v-model="itemList.value1" :placeholder="测试一"  @keyup.enter.native="enterInput"></el-input>
```

type="number"去除输入框聚焦时的上下箭头

```html
<template>
    <div>
        <el-input v-model="itemList.value1" type="number" :placeholder="测试一" class='clear-number-input'></el-input>
    </div>
</template>
<style>
    /* 设置全局 */
    .clear-number-input.el-input::-webkit-outer-spin-button,
    .clear-number-input.el-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none !important;
    } 
    .clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button,
    .clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none !important;
    }
    .clear-number-input.el-input {
    -moz-appearance: textfield;
    } 
    .clear-number-input.el-input input[type="number"] {
    -moz-appearance: textfield;
    }
</style>