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