vue中使用elementUI中遇到的问题

$confirm的使用注意调用请求接口的问题

   // 删除某一条数据
    async deletebook(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该书籍, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // console.log(confirmResult)  点击确定之后返回值拿到的是confirm
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除！");
      }

      const res = await this.$request.delete("/goods/" + id);
      console.log(res);
      if (res.data !== "success") {
        return this.$message.error("删除书籍失败！");
      }
      this.$message.success("删除书籍成功！");
      this.getGoodsList();
    },

el-table中获取某一行的数据

   <el-table :data="userList" style="width: 100%" @selection-change="selectUser">
      <el-table-column align="center" type="selection" width="60" ref="multipleTable"></el-table-column>
      <el-table-column align="center" type="index" label="#" width="180"></el-table-column>
      <el-table-column align="center" prop="username" label="姓名" width="180"></el-table-column>
      <el-table-column align="center" prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column align="center" prop="gender" label="性别"></el-table-column>
      <el-table-column align="center" label="操作">
        <!-- 这里的scope可以修改 -->
        <template v-slot:default="scope">
          <el-button type="primary" plain icon="el-icon-edit" circle @click="goto(scope.row._id)"></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            @click="deleteUser(scope.row._id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

export default {
 data() {
    return {
      selectUserInfo: [],
    };
  },
  methods:{
   // 获取选中的数据
    selectUser(val) {
      //获取用户的选中
      console.log(val);  // 打印 勾选的数据 这里的 val 就是勾选中的那一条
      this.selectUserInfo = [];
      // 获取 val数据的id 放到selectUserInfo 中
      val.forEach( item => {
        this.selectUserInfo.push(item._id);
      });
      // 数组去重
      this.selectUserInfo = Array.from(new Set(this.selectUserInfo));
      
    },
  }
}

流程如下：

1、给 el-table 添加事件 @selection-change="selectUser"
2、给 el-table-column 的type 设置为 type="selection"
3、在data 定义一个变量 为 selectUserInfo: []
4、在methods中 定义方法 selectUser(val) {}
5、其中 val 就是那一条勾选中的数据 打印看下 console.log(val);

el-table表格中使用el-switch组件问题

  <el-table-column  label="任务发布" prop="switch" width="90">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.switch"
          active-color="#4646E6"
          inactive-color="#E3E3FB"
          :active-value="1" 
          :inactive-value="0" 
          @change="changeSwitch"
        ></el-switch>
      </template>
    </el-table-column>

switch开关的使用-如何将文字显示在按钮里面

<!--  -->
<template>
  <div class="content-box">
    <div class="container">
      <div class="switch-wrapper">
        <el-switch
          v-model="value"
          class="switch"
          active-color="#58bc58"
          inactive-color="#ccc"
          active-text="yes"
          inactive-text="no"
        ></el-switch>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'record',
  components: {},
  data() {
    return {
      value: true
    }
  },
  mounted() {},
  computed: {},
  methods: {
  }
}
</script>

<style  lang="scss" scoped>

/* switch按钮样式 */
::v-deep .switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*打开时文字位置设置*/
::v-deep .switch .el-switch__label--right {
  z-index: 1;
}
/* 调整打开时文字的显示位置 */
::v-deep .switch .el-switch__label--right span {
  margin-left: 24px;
}
/*关闭时文字位置设置*/
::v-deep .switch .el-switch__label--left {
  z-index: 1;
}
/* 调整关闭时文字的显示位置 */
::v-deep .switch .el-switch__label--left span {
  margin-left: 29px;
}
/*显示文字*/
::v-deep .switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
::v-deep .switch.el-switch .el-switch__core,
::v-deep .el-switch .el-switch__label {
  width: 70px!important;
  margin: 0;
}
</style>

表单验证的无效问题

el-input输入内容触发问题

element中input的change事件是移除焦点才触发：

 <div class="task-detail pr">
        <el-form-item label="任务描述" prop="taskDesc">
          <el-input
            type="textarea"
            v-model="ruleForm.taskDesc"
            placeholder="请输入任务描述（200字符以内）"
            maxlength="200"
            @input="checkiptTaskDesc()"
          ></el-input>
          <div class="ipt-taskDesc-length">{{checkIptTaskDescLen}}/200</div>
        </el-form-item>
      </div>

想要变成输入就触发：使用@input

el-input输入内容长度问题

 <div class="task-detail pr">
        <el-form-item label="任务描述" prop="taskDesc">
          <el-input
            type="textarea"
            v-model="ruleForm.taskDesc"
            placeholder="请输入任务描述（200字符以内）"
            maxlength="200"
            @input="checkiptTaskDesc()"
          ></el-input>
          <div class="ipt-taskDesc-length">{{checkIptTaskDescLen}}/200</div>
       </el-form-item>
  </div>


  data() {
    return {
      checkIptTaskDescLen:0,
      ruleForm: {
        taskDesc:"",
      },
   }
   
   checkiptTaskDesc(){
      var txtVal = this.ruleForm.taskDesc.length;
      this.checkIptTaskDescLen = txtVal;
    },

element 时间日期选择器el-date-picker点击清空按钮报错 Cannot read property ‘0‘ of null

出现这种情况的原因是: 当点击清除按钮的时候，value会被设置为null
Element-ui中没有内置清除按钮的回调函数。因此要解决这个bug,我使用的方法是在下次调用之前，为value重新赋值，即:

  watch:{
    "ruleForm.startDate" (newVal) {
       if (newVal == null) {
         this.ruleForm.startDate = [];
       }
     },
     ruleForm:{
      handler:function(){
        this.getTaskReportList();
      },
      deep:true,
    },
  },

element验证显示英文

要么传入的数据格式不正确，排查这几个原因就可以了；

element的时间限制时间段

需求：先确定起止时间，在选择暂停时间，而暂停时间必须在起止时间内选择；

<template>
  <div class="flex-center ipt-select">
    <div class="operation-text" v-if="title">{{title}}</div>
    <el-date-picker
      v-model="value"
      type="daterange"
      range-separator="—"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      value-format="yyyy-MM-dd"
      @blur="handleDate"
      :class="[width ==='120' ?'w120':'w240']"
      @change="change"
      :picker-options="pickerOptions"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'InputTimeLimit',
  data () {
    return {
      value: this.val,
      pickerOptions: {
        disabledDate: (time) => {
          // 时间戳 time.getTime()
          // console.log(time.getTime());
          return time.getTime() < this.timeTosjc(this.limitTime[0]) || time.getTime() > this.timeTosjc(this.limitTime[1]);
        }
      }
    };
  },
  props:{
    val:{
      type:Array,
      default:()=>{
        return []
      }
    },
    limitTime:{
      type:Array,
      default:()=>{
        return []
      }
    },
    title:{
      type:String,
      default:'时间'
    },
    width:{
      type: String,
      default: '240'
    }
  },
  watch:{
    val(value){
      if(value == '' || value == null){
        this.value = []
      } else {
        this.value = value
      }
    },
  },
  methods: {
    // 时间转化
    timeTosjc(t){
      // console.log(Date.parse(new Date(t)));
      return Date.parse(new Date(t));
    },
    // 时间
    change(val) {
      this.$emit('input',val)
    },
    handleDate(value){
      // console.log(value);
    }
  },

}
</script>

<style  lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
::v-deep .el-date-editor .el-range__icon {
  position: absolute;
  right: 0;
}
::v-deep .el-range-separator {
  color: #ccc;
}
.ipt-select{
  .operation-text{
    font-size: 14px;
    margin-right: 10px;
    color: $menuActiveText;
  }
}
.w120{
  width: 120px;
}
.w240{
  width: 240px;
}
</style>

主要是这里的时间判断；

 pickerOptions: {
        disabledDate: (time) => {
          // 时间戳 time.getTime()
          // console.log(time.getTime());
          return time.getTime() < this.timeTosjc(this.limitTime[0]) || time.getTime() > this.timeTosjc(this.limitTime[1]);
    	}

elementUI的picker-options 限制结束时间不能大于开始时间

	<div class="selected-time">
        <el-form-item label="起止时间" required  prop="startDate">
          <div class="flex single pr">
            <el-date-picker
              v-model="ruleForm.startDate[0]"
              type="date"
              placeholder="开始时间"
              value-format="yyyy-MM-dd"
              disabled
              class="hiddenIcon"
            ></el-date-picker>
            <div class="line-date">—</div>
            <el-date-picker
              v-model="ruleForm.startDate[1]"
              type="date"
              placeholder="结束时间"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              class="showIcon"
              @change="handleEndDate"
            ></el-date-picker>
          </div>
        </el-form-item>
      </div>


  // 暂停时间
  pickerOptions: {
    disabledDate: (time) => {
      let delay = this.ruleForm.startDate[0];
      return time.getTime() < new Date(delay).getTime();
    },
 },
 // 注意这里必须使用箭头函数，因为函数中使用到vue的this 和上面那个有点不同；
 

解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题

解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

element的tree搜索后不展示下级数据

filterNode(value, data) {
 	if(!value) return true 
	return data. label.indexof (value) !=-1
}

把上面官网的filterNode改为如下代码即可

 filterNode (value, data, node) {
	if (!value) return true
	let parentNode = node.parent
	let labels = [node.label]
	let level = 1
	while (level < node.level) {
		 labels = [...labels, parentNode.label]
		 parentNode = parentNode.parent
		 level++
	}
	return labels.some(label => label.indexOf(value) !== -1)
 }

elementui的选择器用v-if切换导致同步问题

处理方法：在el-form-item上key，key唯一即可

建议都加上key值：

如何修改element-ui选择下拉框的样式？

无法修改选择下拉框的主要原因是，选择下拉的标签并没有插入到body标签中，打开控制台你可以看到这个标签和script标签处于同一层级；

解决的办法：
给 <el-select> 标签添加一个属性 :popper-append-to-body="false"，添加后就可正常的修改属性

Element UI select 和时间选择器插件位置不固定？

:popper-append-to-body=false 这个属性加上就不会随着滚轴滚动

日期时间选择器也会有这个问题 这个属性加上就可以了:append-to-body=false

修改element UI的popover样式

el-popover的class是el-popover，比较特别的是,el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级，需要设置全局style。

当不同页面都使用到了el-popover组件，并且样式有区别，那这样该怎么办？

解决方法：如果设置全局样式，则会导致全局的样式污染，element-ui官网：

在全局设置样式时针对每一个popover-class的名字修改样式即可解决！

修改element UI的弹框样式添加class类名

try {
   	  await this.$confirm('是否删除该条评论', '', {
          center: true,
          modal: true,
          customClass: 'c-confirm',
          cancelButtonClass: 'btn-cancel',
          confirmButtonClass: 'btn-confirm'
        })
      } catch (error) {
        return
      }

<style lang="scss">
.c-confirm {
  width: 246px;
  height: 119px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 2px 12px 0px rgba(167, 167, 167, 0.5);
  padding-top: 24px;
  .el-message-box__header {
    display: none;
  }
  .el-message-box__btns {
    margin-top: 20px;
    height: 28px;
    button {
      height: 28px;
      line-height: 28px;
      padding: 0 23px;

      border-radius: 6px;
      &.btn-confirm {
        background: #4646e6;
        margin-left: -150px;
      }
      &.btn-cancel {
        color: #4646e6;
        border: 1px solid #4646e6;
      }
    }
  }
  .el-message-box__content {
    padding: 0;
  }
}
</style>

ElementUI选择器Select中添加tab栏切换后的回显问题 回显的值为id

最后结果如下：

我的做法是这样的：和大佬分析了一波，回显为id的原因，是请求后的数据和回显的值对不上，导致回显页面显示的是id了，测试多遍，果然是这样的；

每次请求后，把之前选中的对象也一起加到请求后的数据里面，你可能会问，这样就不多了重复的吗，是，但是这里我多处理一步，就是选中的那些对象中添加一个属性，selected为true，而请求回来的数据的selected为false，到时页面渲染时v-show过滤掉就可以了，这样数据包括选中的那些值，回显就不会找不到数据导致回显的id；

相关代码如下：

<el-form-item label="选择任务" prop="task"  required>
        <el-select v-model="ruleForm.task" placeholder="请选择任务" multiple  @change="selectedTask" @visible-change="visibleChange" style="width:240px" :popper-append-to-body="false">
          <template slot="empty">
            <div class="el-tabs-wrapper">
              <el-tabs v-model="activeName" tab-position="top" style="height: 40px;padding:6px 20px" class="tab-select" @tab-click="handleClick">
                <el-tab-pane :label="item.type" :name="item.typeId" v-for="(item, idx) in selectTaskFilter" :key="idx"></el-tab-pane>
                <div class="flex-center-center empty-text">暂无数据</div>
              </el-tabs>
            </div>
          </template>
      
          <div class="el-tabs-wrapper-exist">
            <el-tabs v-model="activeName" tab-position="top" style="height: 40px;padding:0 20px" class="tab-select" @tab-click="handleClick" v-if="selectTaskFilter.length>0">
              <el-tab-pane :label="item.type" :name="item.typeId" v-for="(item, idx) in selectTaskFilter" :key="idx"></el-tab-pane>
            </el-tabs>
          </div>
          <el-option :label="item.name" :value="item" v-for="(item,idx) in tasks" :key="idx" class="select-option" v-show="!item.selected"></el-option>
        </el-select>

	// 选择任务
    selectedTask(value){
      console.log(value, this.ruleForm.task);
      if(this.ruleForm.startDate.length == 0){
        return
      }
      
      this.taskDetailIds = this.ruleForm.task
        .map(elm => elm)
        .join(',')

      // 单独存选择的下拉选项 用于回显数据 页面中v-show来隐藏push进去的值
      let selectedArr = JSON.parse(JSON.stringify(value))
      selectedArr.forEach(item => {
        item.selected = true
      })
      this.selectItem = selectedArr
    },

// 任务报备列表
    async getTaskReportList(){
      try {
        // this.$loading.show()
        let params = {
          userAccountId: this.userAccountID,
          hotelId: this.hotelId,
          startTime: this.ruleForm.startDate[0] == undefined ? '' : this.ruleForm.startDate[0],
          endTime: this.ruleForm.startDate[1] == undefined ? '' : this.ruleForm.startDate[1],
          taskActionType: this.ruleForm.taskType,
          taskPeriod: this.activeName == "0" ? "" : this.activeName
        }
        let res = await taskReportList(params)
        // this.$loading.hide()
        let arr = []
        res.item && res.item.forEach(elm => {
          let obj = {}
          obj.name = elm.taskPlan.title
          obj.id = elm.id.toString()
          obj.value = elm.id.toString()
          obj.selected = false
          arr.push(obj)
        })
        this.tasks = arr;
        if(this.selectItem.length){
          this.tasks.push(...this.selectItem)
        }
      } catch (error) {
        // this.$loading.hide()
        this.$message.error('请求失败!')
      }
    },

注意请求后端数据后的这一步

if(this.selectItem.length){
     this.tasks.push(...this.selectItem)
 }

目前是暂时没问题了，感谢龙哥的指导和分析

elementui的form表单验证问题

场景：点开对话框，立马清空表单验证，但是报错了，因为此时的dom还有人渲染完，是拿不到this.$refs.checkForm ，所以 this.$refs.checkForm.clearValidate() 这个方法报错；

解决如下：

	// 新增检查项目
    handleNewBtn(){
      this.visible = true
      this.title = '新增检查项目'
      this.checkForm.projectCode = ''
      this.checkForm.checkType = ''
      this.checkForm.bussinessType = ''
      this.checkForm.checkOneArea = ''
      this.checkForm.checkTwoArea = ''
      this.checkForm.checkThreeArea = ''
      this.checkForm.checkStandard = ''
      this.checkForm.checkMethod = ''
      this.checkForm.brand = []
      console.log(this.$refs.checkForm);
      // this.$refs.checkForm.clearValidate()
      this.$nextTick(() => {
         console.log(this.$refs.checkForm);
         this.$refs.checkForm.clearValidate()
      })
    },

	// 补充
	// 根据判断条件, 移除所有表单项的校验
	if (/*条件*/) {
		this.$refs['form'].clearValidate();
	}
	// 但是有时候只需要移除其中的某一项校验, 如只移除姓名的校验:
	if (/*条件*/) {
		this.$refs['form'].clearValidate(['name']);
	}
	// 把要单独移除校验的表单项的prop放到数组里面, 调用clearValidate()方法时传入prop数组参数
	// 不传任何参数时, 默认会移除整个表单校验
	

把清空放到 this.$nextTick 去执行就可以；

修改element 的el-radio的选中样式变成对勾

注意修改样式需要深度修改样式 ::v-deep

.el-radio__inner::after {
    content: '';
    width: 10px;
    height: 5px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 4px;
    left: 3px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
}

注意点

// 将radio改成对勾样式
  .el-radio__input.is-checked {
    &:after {
      content: '';
      width: 8px;
      height: 4px;
      border: 1px solid #fff;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 4px;
      left: 3px;
      transform: rotate(-45deg);
    }
    .el-radio__inner {
      &::after {
        display: none;
      }
    }
  }

或者封装一个css类型

 // 将checkbox改成圆形样式
.round {
  .el-checkbox__inner {
    border-radius: 50% !important;
  }
  .el-checkbox__label {
    padding-left: 6px !important;
  }
}


.check-mark {
  // 将radio改成对勾样式
  .el-radio__input.is-checked {
    &:after {
      content: '';
      width: 8px;
      height: 4px;
      border: 1px solid #fff;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 4px;
      left: 3px;
      transform: rotate(-45deg);
    }
    .el-radio__inner {
      &::after {
        display: none;
      }
    }
    &.is-disabled  {
      .el-radio__inner {
        opacity: .7;
        background-color: #4646e6;
      }
    }
  }
}

element ui table tooltip设置宽度

element-ui的table列超出部分省略加悬浮提示 并设置 tooltip 宽度

vue项目中 给element ui的 table 表格某一列添加超出部分省略加悬浮提示 :

:show-overflow-tooltip="true"

实例代码如下

<el-table-column  :show-overflow-tooltip="true" prop="task" label="任务">
</el-table-column>

可以让内容在一行显示并且出现tooltip,但是通常就会出现这样的效果 默认占满全屏：

// 建议可写在公共样式里
.el-tooltip__popper {
    max-width: 30% !important;  //宽度可根据自己需要进行设置 
  }

element-ui中的checkbox只有一个值得时候定义0为未选择1为选中

<el-checkbox true-label="1" false-label="0" v-model="checked">备选项</el-checkbox>


checked: "1"

element-ui中的el-input限制输入数字

<el-input
    v-model.number="checkForm.submit"
    maxlength=3
    minlength=1
    placeholder="请输入"
    style="width: 85px"
    @input="v => contentSetForm.submit= v.replace(/[^\d]/g,'')"
 ></el-input>

如果显示输入的数字为0-100的话，可以再加判断条件；

element-ui中的表格el-table滚动条样式修改

 // 滚动条的宽度
 ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; // 横向滚动条
    height: 10px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 6px;
  }

element-ui中的时间选择器icon的样式调整

<el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      class="daterange"
      :default-time="['12:00:00']">
 </el-date-picker>
    
.daterange {
    .el-icon-date {
      display: none !important;
    }
    .el-date-editor {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 10px;
        width: 14px;
        height: 14px;
        background-image: url("~@/assets/img/icon-calendar.png");
        background-size: cover;
      }
    }
    &.withing {
      .el-date-editor:hover::after {
        display: none;
      }
    }
    img.icon {
      position: absolute;
      right: 10px;
    }
    .el-range-separator {
      color: #c6c4cc;
    }
    .el-range-editor.el-input__inner {
      padding: 3px 0;
    }
  }

element-ui中的单选框点击选中，再点击取消选中

<template>
  <el-radio-group v-model="oneAreaRadio" class="ml10 pt18" >
     <el-radio :label="item.id" v-for="item in oneArea" :key="item.id" @click.native="clickOneAreaitem(item.id)">{{item.areaName}}</el-radio>
   </el-radio-group>
</template>

<script>
export default {
 data () {
    return {
		oneAreaRadio:'',
		radioFlag: false,
		}
	},
 methods: {
	clickOneAreaitem(e){
      if (this.radioFlag === true) {
        this.oneAreaRadio === e ? this.oneAreaRadio = '' : this.oneAreaRadio = e
      }
      this.radioFlag = true
      setTimeout(() => {
        this.radioFlag = false
      }, 300)
    },
  }
</script>

element-ui中的弹框中存在下拉框时，滚动下拉框展示出现样式问题

vant中多选框中对勾换为圆环样式

<template>
  <div class="page-seven">
    <van-checkbox-group v-model="result">
      <van-checkbox name="a">复选框 a</van-checkbox>
      <van-checkbox name="b">复选框 b</van-checkbox>
    </van-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      result: [],
    };
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="scss">
.page-seven {
  .van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #fff;
    border-color: #FF4500;
    border: 6px solid #FF4500;
  }
  .van-icon-success::before {
    content: "";
  }
}
</style>
<style lang="scss" scoped>
</style>