elementUI笔记(view:2344)

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

10.el-table中的el-switch操作添加confirm确认
问题描述：通常switch变化在点击后立马会变化
解决方案：采用单项数据流，使用value绑定数据，不要用v-model来绑定数据，手动改变绑定的数据即可

<el-table :data="tableData">
  <el-table-column label="操作">
    <el-switch :value="scope.row.isSync" :active-value="1" :inactive-value="0" active-text="上线" inactive-text="下线" @change="isSyncChange(scope.row)"></el-switch>
  </el-table-column>
</el-table>

注意：这里用的:value而不是v-model

async isSyncChange (row) {
  this.$confirm('确认修改？')
    .then(async _ => {
      let obj = {
        isSync:row.isSync==1?0:1
        await this.axios.post('', obj)
      }
    })
    .catch(_ => {})
}

11.notify组发内容不换行
解决方案：设置全局style不要加scoped

<style>
.el-notification__content{
  word-wrap: break-word;
  word-break: break-all;
}
</style>

12.设置clearable后输入框长度会变长

13.日期组件报错dateStr.match is not a function
原因：数据类型不能为Number改为日期格式即可
出现场景：增加属性value-format="yyyy-MM-dd HH:mm:ss"后出现此报错

14.表单el-form根据某个el-form-item值动态决定是否需要required验证

setRequired(v){
  if (this.$refs.form) {
    this.$refs.form.clearValidate()
  }
  if (v) {
    rules.scoreAmount[0].required = true
    rules.scoreRadio[0].required = true
  } else {
    rules.scoreAmount[0].required = false
    rules.scoreRadio[0].required = false
  }
}

15.弹框，禁止点击空白处关闭

ElementUI.Dialog.props.closeOnClickModal.default = false      //对话框
ElementUI.Drawer.props.wrapperClosable.default = false        //抽屉

16.<el-input-number :min="0.01" :max="1"></el-input-number>，加减按钮处于禁用状态
解决方案：设置step属性即可，因为默认的step是1，势必就无法加减了

17.el-table中的el-popover无法正常关闭
问题描述，popover下有取消按钮，按照官方绑定v-model="visible"即可，但是实际操作设置v-model后popover直接不显示了，闪动一下立马就关闭了。
多次尝试后，放弃v-model，着手通过设置dom的style来实现。

this.$refs.mypopover.$el.style.display = 'none'
document.querySelector('.el-popover').style.display = 'none'

以上方法依然无效。
换个思路，组件默认是点击空白处自动关闭，那么我们手动触发点击空白即可。
添加一个空的blank元素

<div ref="blank" class="blank"></div>
<el-table-column>
  <template slot-scope="scope">
    <el-popover placement="right" width="110" trigger="click">
      <el-input-number v-model="scope.row.rowRateRatio"></el-input-number> 
        <div>
          <el-button type="primary" @click="handleRateRatio(scope.row)">确定</el-button>
          <el-button @click="handlePopoverClose">取消</el-button>
        </div>
      <i class="el-icon-edit" slot="reference"></i>
    </el-popover> 
  </template>
</el-table-column>

通过触发任意元素点击事件来关闭popover

handlePopoverClose () {
  document.querySelector('.blank').click()
}

bug合集
如下结构会导致页面卡死

<el-form :inline="false">
  <el-row>
    <el-col :span="6"></el-col>
    <el-col :span="6"></el-col>
  </el-row>
</el-form>

18.el-select输入框allow-create限制最大输入字数

<el-select id="selectInput" v-model="x" filterable allow-create @input.native="selectInput"></el-select>

selectInput (v) {
  this.$nextTick(() => {
    let inputControl = document.querySelector('#selectInput')
    inputControl.setAttribute('maxLength', 10)
  })
}