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種寫法：

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

2. 必填規則寫在 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>

2. 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元素，包括同一行的(使用場景：只改變同行另一個單元格的樣式)。