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 出现横向滚动条：

https://github.com/ElemeFE/element/issues/4456

.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种写法：

把 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')

必填规则写在 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种方法：

可以使用 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>

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元素，包括同一行的(使用场景：只改变同行另一个单元格的样式)。

巴特西

ElementUI 知识点

最新文章

热门文章