精华内容
下载资源
问答
  • el-select,el-input__inner,el-input__suffix样式修改
    千次阅读
    2021-03-11 17:24:23

    上图:
    在这里插入图片描述
    项目:vue + element
    问题:element虽好,但是样式修改起来是真的费劲。
    总结:el-select的宽度是默认充满容器的所以只需要设置高度即可

    css样式:

    //对整个容器进行设置
      .el-select /deep/ .el-input__inner {
        height: 44px;
        border: none;
        margin-top: 24.5px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #2e5afb;
      }
      //对小标的设置和样式自定义
      .el-select /deep/ .el-input__suffix {
        top: 11px;
        .el-select__caret {
          font-size: 24px;
          color: #333333;
        }
      }
    
    更多相关内容
  • vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如...el-input监听不到键盘事件,原因是element-ui是封装组件,所以el标签属于自定义标签,因此触发不了键盘事件。 解决办法:加上.native原生事件修饰符即可。
  • el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el placeholder=搜索 icon=search v-model=input on-icon-click=pchandleIconClick keyup.enter.native=...
  • 本文通过实例代码给大家介绍了el-input 标签中密码的显示和隐藏 ,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 小编在使用element-ui时,el-input组件监听不了回车事件,怎么回事呢?下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法,一起看看吧
  • element-ui的el-form表单和el-table校验嵌套使用校验el-inputel-select

    本文主要讲element-ui的el-form表单和el-table校验嵌套使用校验el-input和el-select

    效果

    点击保存可校验el-input和el-select是否有值,不符合校验规则就标红提醒
    在这里插入图片描述

    1.el-form嵌套el-table

    • 1.el-form里面嵌套el-table
    <el-form :model="formData" :rules="formData.rules" ref="formRef">
        <el-table
           :data="formData.tableData"
           style="width: 100%">
           <el-table-column
             prop="id"
             label="单号"
             width="100">
           </el-table-column>
         </el-table>
    </el-form>
    
    • 2.在el-table-column自定义内容里面,嵌套el-form-item,里面再放el-input或者el-select结构
     <el-table-column
       prop="name"
        label="商品名"
        width="180">
        <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
        </template>
      </el-table-column>
    
    • 3.数据的结构
      因为el-form是最外层的,所以formData是个对象,对象里放el-table用到的数组和rules
      这样定义是为了校验时用到rules
     formData: {
        rules: {
            name: {
              required: true,
              message: '请输入商品名',
              tirgger: ['blur', 'change']
            },
            selected: {
              required: true,
              message: '请选择',
              tirgger: 'change'
            }
          },
          tableData: [
            {id: '001'},
            {id: '002'},
            {id: '003'},
          ]
        },
    

    2.定义规则

    1.el-form绑定: rules使用formData.rules整个对象,同时定义一个ref

    <el-form :model="formData" :rules="formData.rules" ref="formRef">
    

    2.保证prop必须唯一
    自定义prop:使用 列表数据属性名+列的下标scope.$index+列的数据属性名

     <el-table-column
       prop="name"
        label="商品名"
        width="180">
        <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="formData.rules.name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
        </template>
      </el-table-column>
    

    注意:如果不是使用列表数据属性名tableData,会出现报错
    Error: please transfer a valid prop path to form item

    3.保证每一个el-form-item都要配置rules属性
    rules使用formData.rules对应的属性的规则

    3.完整代码

    <template>
      <div>
        <el-form :model="formData" :rules="formData.rules" ref="formRef">
          <el-table
            :data="formData.tableData"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="单号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              label="商品名"
              width="180">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="formData.rules.name">
                  <el-input v-model="scope.row.name"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="class"
              label="分类">
              <template slot-scope="scope">
               <el-form-item :prop="'tableData.' +scope.$index + '.class'" :rules="formData.rules.selected">
                 <el-select v-model="scope.row.class">
                    <el-option
                      v-for="item in classOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
               </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <el-button @click="submitForm('formRef')">提交</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          formData: {
            rules: {
              name: {
                required: true,
                message: '请输入商品名',
                tirgger: ['blur', 'change']
              },
              selected: {
                required: true,
                message: '请选择',
                tirgger: 'change'
              }
            },
            tableData: [
              {id: '001'},
              {id: '002'},
              {id: '003'},
            ]
          },
          classOption: [
            {
              value: 0,
              label: '分类1'
            },
            {
              value: 0,
              label: '分类1'
            }
          ]
        }
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
      }
    }
    </script>
    
    
    展开全文
  • el-table点击单元格切换成可编辑状态,修改数据后提示已修改

    思路:

    1.使用el-table提供的scope,可获取被点击行的索引,行数据,列数据等
    2.在template中写好el-input和p标签,不点击单元格时显示p标签,展示默认数据;点击时显示el-input标签,可编辑
    3.输入框获取焦点时,保存当前数据;修改数据后,与原数据比较,若有变动,失去焦点后提示”修改成功“

    效果:

    在这里插入图片描述

    代码:

    html:

    <div id="app">
        <el-table :data="dataList" style="width: 100%;" size="small">
            <el-table-column label="序号" width="140" width="60" prop="num" v-model="dataList.num"></el-table-column>
            <el-table-column label="名称" width="120">
                <!-- 关键代码 -->
                <template slot-scope="scope">
                    <el-input v-if="scope.row.isnameSelected" v-model="scope.row.name"
                        @focus="focusEvent(scope.row,scope.$index,scope.column)"
                        @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                    <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.name}}</p>
                </template>
            </el-table-column>
            <el-table-column label="年龄" width="120">
                <!-- 通过isageSelected显示或隐藏 -->
                <template slot-scope="scope">
                    <el-input v-if="scope.row.isageSelected" v-model="scope.row.age"
                        @focus="focusEvent(scope.row,scope.$index,scope.column)"
                        @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                    <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.age}}</p>
                </template>
            </el-table-column>
            <el-table-column label="金额" width="120">
                <template slot-scope="scope">
                    <!-- 通过issalSelected显示或隐藏 -->
                    <el-input v-if="scope.row.issalSelected" v-model="scope.row.money"
                        @focus="focusEvent(scope.row,scope.$index,scope.column)"
                        @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                    <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.money}}</p>
                </template>
            </el-table-column>
        </el-table>
    </div>
    

    data:

    data: {
        // 需要展示的数据,模拟从接口或组件传递过来的值
        dataList: [
            { name: "测试1", age: 24, num: 10010, money: "1200" },
            { name: "测试2", age: 24, num: 10011, money: "1200" },
            { name: "测试3", age: 24, num: 10012, money: "1200" },
            { name: "测试4", age: 24, num: 10013, money: "1200" }
        ]
    }
    

    自定义指令focus:

    //自定义指令
    directives: {
        focus: {
            inserted: function (el) {
                el.querySelector('input').focus()
            }
        }
    }
    

    methods:

    修改数据,辅助每列单元格被选中时的隐藏与显示

    //请求接口
    getList() {
        //遍历,给每项数据添加上某列是否被选中的flag,需要改成可修改的列数都要添加flag,且与上面v-if的一致
        this.dataList = this.dataList.map((item) => {
            return { ...item, isnameSelected: false, isageSelected: false, issalSelected: false }
        });
    }
    

    由于我的数据是自定义的,不由接口返回和组件传递而来,所以数据的修改设置在created阶段

    created() {
        this.getList()
    }
    

    点击单元格:

    //点击文本触发,显示input框,隐藏p标签
    cellClick(row, column) {
        if (column.label == "名称") {
            row.isnameSelected = !row.isnameSelected
        } else if (column.label == "年龄") {
            row.isageSelected = !row.isageSelected
        } else if (column.label == "金额") {
            row.issalSelected = !row.issalSelected
        }
    }
    

    点击输入框,获得焦点时

    //点击输入框聚焦,存储当前值
    focusEvent(row, index, column) {
        if (column.label == "名称") {
            row.oldName = row.name
        } else if (column.label == "年龄") {
            row.oldAge = row.age
        } else if (column.label == "金额") {
            row.oldSal = row.money
        }
    }
    

    完成输入,点击其他处,失去焦点:

    //输入框失去焦点触发,此处用提示框提示修改
    blurEvent(row, curIndex, column) {
        if (column.label == "名称") {
            row.isnameSelected = !row.isnameSelected
            if (row.name !== row.oldName) {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration: 1000
                })
            }
        } else if (column.label == "年龄") {
            row.isageSelected = !row.isageSelected
            if (row.age !== row.oldAge) {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration: 1000
                })
            }
        } else if (column.label == "金额") {
            row.issalSelected = !row.issalSelected
            if (row.money !== row.oldSal) {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration: 1000
                })
            }
        }
    }
    

    app组件完成代码

        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    // 需要展示的数据,模拟从接口或组件传递过来的值
                    dataList: [
                        { name: "测试1", age: 24, num: 10010, money: "1200" },
                        { name: "测试2", age: 24, num: 10011, money: "1200" },
                        { name: "测试3", age: 24, num: 10012, money: "1200" },
                        { name: "测试4", age: 24, num: 10013, money: "1200" }
                    ]
                },
    
                created() {
                    this.getList()
                },
                //自定义指令
                directives: {
                    focus: {
                        inserted: function (el) {
                            el.querySelector('input').focus()
                        }
                    }
                },
                methods: {
                    getList() {
                        //遍历,给每项数据添加上某列是否被选中的flag,需要改成可修改的列数都要添加flag,且与上面v-if的一致
                        this.dataList = this.dataList.map((item) => {
                            return { ...item, isnameSelected: false, isageSelected: false, issalSelected: false }
                        });
                    },
                    //点击输入框聚焦,存储当前值
                    focusEvent(row, index, column) {
                        if (column.label == "名称") {
                            row.oldName = row.name
                        } else if (column.label == "年龄") {
                            row.oldAge = row.age
                        } else if (column.label == "金额") {
                            row.oldSal = row.money
                        }
                    },
    
                    //输入框失去焦点触发,此处用提示框提示修改
                    blurEvent(row, curIndex, column) {
                        if (column.label == "名称") {
                            row.isnameSelected = !row.isnameSelected
                            if (row.name !== row.oldName) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success',
                                    duration: 1000
                                })
                            }
                        } else if (column.label == "年龄") {
                            row.isageSelected = !row.isageSelected
                            if (row.age !== row.oldAge) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success',
                                    duration: 1000
                                })
                            }
                        } else if (column.label == "金额") {
                            row.issalSelected = !row.issalSelected
                            if (row.money !== row.oldSal) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success',
                                    duration: 1000
                                })
                            }
                        }
                    },
    
                    //点击文本触发,显示input框,隐藏p标签
                    cellClick(row, column) {
                        if (column.label == "名称") {
                            row.isnameSelected = !row.isnameSelected
                        } else if (column.label == "年龄") {
                            row.isageSelected = !row.isageSelected
                        } else if (column.label == "金额") {
                            row.issalSelected = !row.issalSelected
                        }
                    }
                }
    
            });
        </script>
    
    展开全文
  • 一级标题 *#append #prepend 的...常见 el-input文本框 样式* 代码如下: <el-input placeholder="用户名" v-model="row" style="width:300px;margin-left:20px;"> <template #prepend> 资产编号

    一级标题

    *#append #prepend 的使用
    #suffix

    常见 el-input文本框 样式*

    在这里插入图片描述
    在这里插入图片描述
    #suffix (后) prefix(前)使用

    <el-input ref="inputRef" v-model="value" @click="onFocusHandle" class="tableInput" placeholder="请选择门店">
                            <template #suffix>
                                <i class="el-input__icon el-icon-search"></i>
                            </template>
                        </el-input>
    

    代码如下:在这里插入图片描述

    
    
                        <el-input placeholder="用户名" v-model="row" style="width:300px;margin-left:20px;">
                            <template #prepend>
                                资产编号
                            </template>
                        </el-input>
                        <el-input placeholder="用户名" style="width:300px;margin-left:20px;">
                            <template #append>
                                <el-button icon="el-icon-search"></el-button>
                            </template>
                        </el-input>
                        <el-input placeholder="用户名" style="width:300px;margin-left:20px;">
                            <template #append>搜索</template>
                        </el-input>
                        <el-input placeholder="用户名" v-model="row" readonly style="width:300px;margin-left:20px;">
                            <template #prepend>
                                只读
                            </template>
                        </el-input>
    
    
    
    展开全文
  • el-input输入框默认提供的字体较小,且内边距较大。 这是为了提供统一的样式和好看的外观。 在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。 2. 解决方案 输入框样式类为class='...
  • 3列的值是1列乘以2列计算得出的,并且1列和2列必须是正整数 首先想到的是下图这种办法,用v-model.number 加校验,只要...el-input-number完美的处理了我的需求 :min是可输入的最小值 :max是可输入的最大值,.
  • 解决方法 <el-form :model="form" label-width="100px" size="small"> <...el-input v-model="form.value1" autocomplete="off"></el-input> </el-form-item> </el-c
  • 是的,el-select、el-date-picker等的宽度就是比input端,可以设置style,width:100%来解决。 <el-date-picker v-model="endTime" type="date" placeholder="结束时间" style="width:100%;" value-format=...
  • el-input系列所有带有palceholder的,修改palceholder的样式。。。。。 为了避免样式污染,对placeholder先包一个父类 //谷歌浏览器 .父类 /deep/ input :: --webkit-input-... :-ms-input-placeholder { /
  • 参考网址: (适用vue2)让element-ui的输入框聚焦的4种方式 ... 因为el-input这是个组件,input外面被一层 div 包裹着, el打印出来是外面这个 div,需要找到内层的input 详情见:分析(点击跳转到分析) directives
  • el-input type="number" oninput="if(value.length>10)value=value.slice(0,10)" @keyup.enter.native="query()" :max="99999999"> </el-input> oninput 是个自定义事件 在事件里面获取输入的数字...
  • 最近使用el-table中需要计数,但是发现加上elementUI官网的代码发现只能触发一次,下面是解决办法,实用 <el-table-column ...el-input-number v-model="scope.row.count" controls-position="right
  • Element el-input-number 计数器详解

    千次阅读 热门讨论 2021-02-02 11:46:39
    1. 用途 计数器是一种特殊的...el-input-number v-model="num1" label="请输入数量"></el-input-number> <el-divider></el-divider> 效果: 3. 指定最大、最小值 可以为计数器指定数值的最
  • el-input+el-tree+搜索

    千次阅读 2020-12-12 15:01:06
    效果图 代码 <template> <div > ...el-input v-model="inputValue" @focus="projectOrgFun" @keyup.enter="search"> <el-button slot="append" icon="el-icon-search" @click
  • Element el-input 输入框详解

    万次阅读 2021-02-02 10:15:56
    1. 用途 ...Element提供了功能和样式丰富的输入框,本篇就来了解下。 2. 输入框 输入框为el-input,其编译后生成的HTML元素为input,样式class中包含el-input,所以我们首先设定下统一样式,...el-input v-model="input1
  • 1、element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"></el-input> <el-input v-model="value" @change="handleChange"></el-input> <el-input v-...
  • elementui之el-input输入框内容限制

    千次阅读 2021-11-09 09:11:50
    elementui之el-input输入框内容限制汇总elementui之el-input输入框内容限制限制仅能输入数字,整数不得超过2位,小数不得超过2位限制输入数字1到3位数字(0-100) elementui之el-input输入框内容限制 限制仅能输入...
  • el-form-item label="国际区号_预留手机" prop="ccInAcctNmTel" class="formItemBox"> <div class="flexBox"> <el-select v-model="countryCode.ccInAcctNmTel" placeholder="请选择" @change=...
  • 1.el-input修改样式 在html的样式中发现input输入框的样式写在.el-input__inner中,此时使用常规css样式写法不生效,需使用/deep/,写法如下: /deep/.el-input__inner { height: 30px; line-height: 30px; } ...
  • 当表单中只有一个el-input输入框时, input的回车事件触发了表单的提交事件导致页面自刷新 需在el-form标签添加属性@submit.native.prevent阻止触发提交事件 <el-form @submit.native.prevent ref="formInfo" :...
  • el-table嵌套el-input进行验证

    千次阅读 2021-03-22 13:59:16
    el-table-column label="排序" align="center"> <template slot-scope="scope"> <el-form :ref="'form'+scope.$index" :model="scope.row" :rules="checkParamsRule"> <el-form-item prop=...
  • element el-input 去掉边框

    千次阅读 2022-02-26 23:05:10
    element样式还是蛮好的,只是有时候我们需要做一些调整,比如,el-input 的边框,官网是这样子的 我们需要这样子的 然后我们常规操作,**border: none;**或者 border: 0; 发现行不通,哈哈哈哈哈 tip:将border...
  • <el-form-item label="派驻寿险机构" prop="lifeComName"> <el-tooltip :disabled="disabledTooltip" effect="dark" :content="ruleForm....el-input ref="lifeComNameStr" v-model="ruleForm.lifeCo

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 153,779
精华内容 61,511
关键字:

el-input

友情链接: KeilWigglerH-JTAG1.rar