近期使用Element-UI框架问题需求总结

Select下拉框支持手动输入，创建选择项中不存在的条目

使用自带属性: allow-create

 <el-select
            v-model="绑定值"
            filterable           //是否可搜索   必须为true
            allow-create        //是否允许用户创建新条目，需配合 filterable 使用
            default-first-option   //在输入框按下回车，选择第一个匹配项。需配合 filterable
            placeholder="请选择"    //  提示
            size="mini"        //   最小
          >
            <el-option
              :key="item.id"
              :label="item.name"
              :value="item.value"
              v-for="item in 数据"
            >
            </el-option>
          </el-select>

防止用户输入为空或者为空格字符可以使用正则来进行替换

visibleChange() {
        //   判断当前选中的值把空格替换后是否为空
        //  截头去尾 会去掉开始和结束的空格，类似于trim

  if (this.绑定值.replace(/(^\s*)|(\s*$)/g, '') == '') {
    this.绑定值 = ''
    this.$message.error('值不可以为空格和空')
  }
},

可在select使用change事件，当值发生改变时进行触发判断

el-Tree树形菜单根据后台返回数据回显，父节点选中，子节点全部选中得问题

---查看代码 是否使用为 setCheckedKeys()、default-expanded-keys、default-checked-keys方法或者属性进行数据回显

问题原因：使用getCheckedKeys()会将半选中状态得父节点也获取到，直接都回显数组进行赋值操作，会出现这种情况

    let that = this // 获取当前this  防止this指向更改
    setTimeout(() => {
      返回得数据数组.forEach((item) => {
        // 此次得item为返回选中节点的唯一id字段   上方组件上要添加node-key属性
        that.$refs.Tree组件自定义的ref属性名.setChecked(item, true, true)
      })
    }, 500)

el-date-picker时间组件设置默认值

将变量进行赋值：new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/.[\d]{3}Z/, '')

其实使用new Date()也可以达到默认值的效果 在时间组件展示的也是yyyy-MM-dd HH:mm:ss的格式，但是在你进行传值的时候就会发现它只是展示的为这个格式，其实变量值还是中国标准时间格式。

 created(){
    this.value=new Date()
    console.log(this.value) 

    // 直接使用new Date()进行赋值 展示正确 
    // 但是值为中国标准时间  Sun Mar 27 2022 00:12:25 GMT+0800 (中国标准时间)


    this.value=new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    console.log(this.value)  

    // 这样就是展示的格式为`yyyy-MM-dd HH:mm:ss`的格式  
    // 而且输出的也是正确的 2022-03-27 00:14:17

  }

el-table表格清除添加高度后的滚动条、更换指定的滚动样式(谷歌)

// 清除滚动条
::v-deep .el-table__body-wrapper {
     &::-webkit-scrollbar {
       display: none;
     }
     & {
       scrollbar-width: none;
     }
  }


// 更改指定样式

::v-deep .el-table__body-wrapper {
      &::-webkit-scrollbar {  // 设置整个滚动条
        width: 10px;
      }
      &::-webkit-scrollbar-thumb {  // 滚动条上的滚动滑块
        border-radius: 10px;
        background-image:    url('../../../../assets/images/icon-scroll.png');
        background-size: 100% 100%;
      }
      &::-webkit-scrollbar-track { // 滚动条轨道  即滚动条后面的轨迹设置
        background: url('../../../../assets/images/icon-resource30.png')
          no-repeat;
        border-radius: 0px;
        background-position: center;
      }
      & {
        scrollbar-width: thin;
        scrollbar-color: #0972c5 rgba(238, 238, 238, 0);
      }
  }