ElementUI 知识点

  • 类型是number的el-input 去掉滚轮事件: @mousewheel.native.prevent
 <el-input  type="number" @mousewheel.native.prevent v-model="" size="small"></el-input>
  • 键盘回车事件导致页面刷新的问题: el-form 添加@submit.native.prevent
<el-form   @submit.native.prevent> </el-form>

  • 树形组件：http://element-cn.eleme.io/2.4/#/zh-CN/component/tree
    注意：当check-strictly为false时，当设置选中的节点 setCheckedKeys，有一级栏目的id时，所有的二级栏目都会被选中。

  • submitForm 要写在 mounted（mounted 是编译好的html挂载到页面之后，执行的钩子函数） 生命周期里，代码如下：

mounted () {
　　this.submitForm('ruleForm')
}

.el-tree-node > .el-tree-node__children {
    overflow: inherit;
    background-color: transparent
}
  • el-dialog 点击空白处时，不关闭：
    添加 before-close 方法。
    通过控制v-model，来显示或隐藏 el-dialog。
    下面是 stylus 语法
el-dialog(v-model="headPicDialogVisible" size="tiny" :before-close="handleBeforeClose")

handleBeforeClose (done) {
　　// el-dialog 点击空白处时，不关闭：
　　this.$confirm('确认关闭？')
　　　　.then(function () {
　　　　　　done();
　　　　})
　　　　.catch(function () {
　　　　});
}
  • 表单验证里的必填: required，有2种写法：
  1. 把 required 属性直接写在 el-form-item 里
    作用：只是让 label 加红星
                el-form-item.area(label='所在地' required)
                    el-form-item.left(prop='province')
                        el-select(v-model='form.province' placeholder='省/直辖市' @change="form.city = cityOptions[0]")
                            el-option(v-for='item in provOptions' v-bind:label='item' v-bind:value='item')
                    el-form-item.left(prop='city')
                        el-select(v-model='form.city' placeholder='市/区' no-data-text='请先选择省／直辖市')
                            el-option(v-for='item in cityOptions' v-bind:label='item' v-bind:value='item')
  1. 必填规则写在 rules 里
    作用：label 会加红星，而且如果该项没填写的，该表单填写框下会提示message里的内容（如果没有message，则提示：[prop_name] is required ）
            rules: {
                name: [{ type: 'string', required: true, min: 1, max: 30, message: '请输入1-30个字的秒拍号名称', trigger: 'blur' }]
            }

  • 问题：el-select 的下拉框部分（class="el-select-dropdown"的div），没有出现在页面靠近body结束标签的地方，导致点击无法出现下拉框。
    解决：临近的 div 没有设置宽度（造成该 div 覆盖在 el-select 之上） 或 没有设置 float:left。

  • 问：当深度watch一个对象时，newval和oldval的值为什么是相等的？
    答：和深度无关，而是在修改（不是替换）对象或数组时，旧值将与新值相同，因为它们索引同一个对象/数组。Vue 不会保留修改之前值的副本。

  • 饿了么el-dialog，里面的内容在弹出窗口之前并没有元素，因此无法通过 ref 获得。
    可以添加open事件，在open事件中，setTimeout 一段时间（可以是0）再获得元素 ref。

<el-dialog title="查看视频" size="small" v-model="dialogVisible" @open="setVideoSrc">

            setVideoSrc: function () {
                var _this = this
                setTimeout(function() {
                   _this.$refs.video.src = _this.base + _this.scid + '.' + _this.and
                }, 100)
            }
  • 饿了么el-dialog，点击关闭按钮能关闭，需要设置v-model
<el-dialog title="提示" size="tiny" v-model="dialogVisible">
  • 饿了么e-table，每列的样式不同，有2种方法：
  1. 可以使用 template 里面加样式，css里写样式的具体内容：
    <el-table-column prop="tag" label="标签" width="100">
      <template scope="scope">
        <div :class="scope.row.tag >= 0 ? 'bbb' : 'aaa'">{{scope.row.tag}}</div>
      </template>
    </el-table-column>
  1. el-table-column 中绑定 formatter 方法：
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatterColumn">
    </el-table-column>

methods里添加方法：

        formatterColumn (row, column) {
            let key = column.property
            let h = this.$createElement
            if (parseInt(row[key]) >= 0) {
                return h('div', {style: 'color:#23232b;'}, row[key])
            } else {
                return h('div', {style: 'color:#ff7b4d;'}, row[key])
            }
        },
  • 饿了么e-table，列可以设置 :formatter，对列的值进行处理
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  • 饿了么表单 el-form 的验证规则，可以分为简单验证和自定义校验规则。
    简单验证，举例：
name: [{ type: 'string', required: true, min: 2, max: 10, message: '请输入2-10个字的有效名称', trigger: 'blur' }],

自定义校验规则，需要自己写校验函数。

  • 问：elementUI中，el-select 下拉框如何实现默认选择?
    答：绑定v-model。
    注意： v-model="value4" 这里的 value4 要和 options 里的 value 保持一致
<el-select v-model="value4" clearable placeholder="请选择">
  • 每一个 el-form-item 组件会new 一个AsyncValidator实例的 同时也会创建一个内部验证的model对象, 将其el-form-item上的prop属性设置到model对象上去。
var validator = new AsyncValidator(descriptor);
var model = {};
model[this.prop] = this.fieldValue;

比如：

    <!-- 表单项，prop属性表示要进行表单验证，验证规则对应为rules的属性name -->
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name" size="large"></el-input>
    </el-form-item>

  • ElementUI里面的一些元素设置属性要使用：v-bind:，否则会报错。
    举例：el-input(v-model='form.desc' type='textarea' v-bind:rows='4' placeholder="请填写")

  • Element获取vuex中store的值，并绑定到form，有2种方式：
    1.将store的值深克隆下，与form的值进行双向绑定；
    2.新增加一个state，与form的值进行双向绑定；

  • Element先填充表单，再修改表单时：必须现在data里设置默认值，才能实现双向绑定。

    data () {
        return {
            form: {
                nick: '',
                desc: '',
                gender: 1,
                province: '',
                city: ''
            }
        }
    }
  • show-overflow-tooltip属性：当内容过长时，出现省略号，并显示 tooltip
<el-table-column prop="address" label="地址" show-overflow-tooltip>
  • current-change：当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性。
<el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange">

  • el-table.list(:data='data' @cell-click="handleMsgToggle" ) 说明：pug语法
    cell-click：当某个单元格被点击时会触发该事件，参数：row, column, cell, event
    调用api，参数要对应好。

  • $refs使用。
    html定义：

<div id="app">
    <el-input type="text" ref="test" placeholder="enter text"></el-input>
</div>

引用：

this.$refs.test.$el.getElementsByTagName('input')[0].focus();
  • cell-click 当某个单元格被点击时会触发该事件，参数：row, column, cell, event
    row-click 当某一行被点击时会触发该事件，参数：row, event, column
    其中：
    event.target是被点击的元素
    event有个path属性，里面有所有的表格html元素，包括同一行的(使用场景：只改变同行另一个单元格的样式)。

posted on 2017-07-08 15:02  cag2050  阅读(1794)  评论(0)  编辑  收藏  举报

导航