vue+element常用小功能(持续更新中)

1、表格超出显示省略号

:show-overflow-tooltip='true'

//过长样式修改
.el-tooltip__popper{
    max-width:20%;
  }
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
  }

2、表单添加红色星号,但是不会校验

:required="true"

3、下拉框有值却无法选中的问题

@change="change()"

change(){
      this.$forceUpdate()
  },

4、选择框禁止选中

:selectable="checkSelectable"

checkSelectable(row) {
  return row.date == '2016-05-03'
}
//若返回为 true, 则可以选中,否则禁止选中

5、el-input输入框字符限制,只显示英文及数字

<el-input v-model="accountVal" maxlength="24" @input="accountInput" placeholder="请输入用户账号"></el-input>
//通过监控输入框的事实输入,来进行正则盼盼重新赋值处理

accountInput(val){//账号的实时输入
    let codeReg = new RegExp("[A-Za-z0-9]+") //正则 英文+数字;
    let len= val.length
    let str= ''
    for(var i=0;i<len;i++){
     if(codeReg.test(val[i])){
      str+=val[i];
     }
    }
    this.accountVal=str;
   },

6.element-ui checkbox 设置选中为1,未选中为0

<el-checkbox v-model="data" :true-label="1" :false-label="0"></el-checkbox>

7.vue组件中props类型及默认值

props: {
    String: {
      type: String,
      default: ''
    },
    Number: {
      type: Number,
      default: 0
    },
    Boolean: {
      type: Boolean,
      default: true
    },
    Array: {
      type: Array,
      default: () => []
    },
    Object: {
      type: Object,
      default: () => ({})
    },
    Function: {
      type: Function,
      default: function () { }
    }
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容