elementUI笔记(view:542)

1.checkbox-group绑定的值是按照点击的顺序保存的,所以如果对索引位置敏感,就需要手动排序

2.表单清空验证信息
this.$refs['form'].clearValidate(['mobile'])
this.$refs['form'].clearValidate()
如果form是通过v-if控制显示的,则对应代码要放到$nextTick中
this.$nextTick(() => {
this.$refs.form.clearValidate()
})

3.el-dropdown中的click不生效,使用@click.native

<el-dropdown size="mini" split-button type="primary">
  <span>更多操作</span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="handleServiceList(scope.row)">
      <span size="mini" type="primary">服务列表</span>
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

4.v-for中的input无法输入
加个@input在方法里写this.$forceUpdate()

4(1).el-table下的el-input绑定属性,table_roomTypeList直接赋值可以正常输入,但是经过forEach修改属性后,el-input就无法输入了

<el-table-column prop="" label="酒店代码">
  <template slot-scope="scope">
    <el-input v-model="scope.row.agentRoomType" @input="handleInput($event,scope.$index,'agentRoomType')" size="mini"></el-input>
  </template>
</el-table-column>
handleInput(e,index,key){
  let item = this.table_roomTypeList[index]
  item[key] = e
    this.$set(this.table_roomTypeList,index,item)
  },
this.roomTypeList.forEach((item,index)=>{
  item.agentRoomType = '' // 这个操作会导致input输入失效
})

5.el-table数据切换后无法正确显示

<el-table-column prop="reservationID" label="" width="0px">
</el-table-column>

用空的label和width添加一个不显示的列

6.el-input的@input事件传递多个参数
el-inpu位于el-table中,类型为number,设置了min,但是手动输入的时候并min不会生效,此时如果输入值小于预设值则提示并重置输入值为最小值

<el-input type="number" v-model="scope.row.customPrice" :min="scope.row.price" :step="10" size="mini" @input="(val)=>{customPriceInput(val,scope.row.price,scope.row)}" clearable></el-input>

customPriceInput(v,price,row){
  if (Number(v)<price){
    this.$message.error('自定义价格不能低于当前价格')
    row.customPrice = price
  }
},

7.el-table中,一个column中后一个slot-scop会覆盖前一个

<el-table-column>
  <template slot-scope="scope">111</template>
  <template slot-scope="scope">222</template>
<el-table-column>

下一个slot-scope="scope"会覆盖上一个

8.el-table中input动态添加的ref设置focus

this.$nextTick(() => {
  (this.$refs[roomType + day]).focus()
})

注意,$refs后用了圆括号包裹,否则会报错

9.el-table远程排序

<el-table :data="tableData" @sort-change="sortChange">
  <el-table-column prop="checkIn" label="抵达" sortable="custom"></el-table-column>
</el-table>
sortChange(column){
  console.log(column.prop)
  console.log(column.order)
}