elementUI笔记(view:1609)

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

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

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

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

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

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

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

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

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

  1. <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>
  2.  
  3. customPriceInput(v,price,row){
  4. if (Number(v)<price){
  5. this.$message.error('自定义价格不能低于当前价格')
  6. row.customPrice = price
  7. }
  8. },

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

  1. <el-table-column>
  2. <template slot-scope="scope">111</template>
  3. <template slot-scope="scope">222</template>
  4. <el-table-column>

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

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

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

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

9.el-table远程排序

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

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

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

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

  1. async isSyncChange (row) {
  2. this.$confirm('确认修改?')
  3. .then(async _ => {
  4. let obj = {
  5. isSync:row.isSync==1?0:1
  6. await this.axios.post('', obj)
  7. }
  8. })
  9. .catch(_ => {})
  10. }

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

  1. <style>
  2. .el-notification__content{
  3. word-wrap: break-word;
  4. word-break: break-all;
  5. }
  6. </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验证

  1. setRequired(v){
  2. if (this.$refs.form) {
  3. this.$refs.form.clearValidate()
  4. }
  5. if (v) {
  6. rules.scoreAmount[0].required = true
  7. rules.scoreRadio[0].required = true
  8. } else {
  9. rules.scoreAmount[0].required = false
  10. rules.scoreRadio[0].required = false
  11. }
  12. }

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

  1. ElementUI.Dialog.props.closeOnClickModal.default = false //对话框
  2. 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来实现。

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

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

  1. <div ref="blank" class="blank"></div>
  2. <el-table-column>
  3. <template slot-scope="scope">
  4. <el-popover placement="right" width="110" trigger="click">
  5. <el-input-number v-model="scope.row.rowRateRatio"></el-input-number>
  6. <div>
  7. <el-button type="primary" @click="handleRateRatio(scope.row)">确定</el-button>
  8. <el-button @click="handlePopoverClose">取消</el-button>
  9. </div>
  10. <i class="el-icon-edit" slot="reference"></i>
  11. </el-popover>
  12. </template>
  13. </el-table-column>

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

  1. handlePopoverClose () {
  2. document.querySelector('.blank').click()
  3. }

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

  1. <el-form :inline="false">
  2. <el-row>
  3. <el-col :span="6"></el-col>
  4. <el-col :span="6"></el-col>
  5. </el-row>
  6. </el-form>

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

  1. <el-select id="selectInput" v-model="x" filterable allow-create @input.native="selectInput"></el-select>
  2.  
  3. selectInput (v) {
  4. this.$nextTick(() => {
  5. let inputControl = document.querySelector('#selectInput')
  6. inputControl.setAttribute('maxLength', 10)
  7. })
  8. }