Element-plus

1. 下拉框禁用样式修改

Element-plus 踩坑日志_element-plus

下拉的框挂到body上了，而 ele-plus 不让添加到 body 的属性废弃了， 组件内 样式 scoped 所以组件内就找不到 单独添加个 style 给select 单独加个特殊类名



表格

1. 表格禁用全选

#1.1 直接隐藏

table {
    width: 100%;
    :deep(.el-table__header-wrapper) {
      .el-checkbox {
        display: none;
      }
    }
  }
}

#1.2 全选事件清空

@select-all="handleSelectAll"

const refTable = ref()

handleSelectAll =() =>{
  refTable.value?.clearSelection()
}

2. 表格单元格验证+提示 show-overflow-tooltip

如加 show-overflow-tooltip, 同时验证不通过是会提示验证不通过的内容，故去掉

<el-table-column prop="scoringMethod" label="评分规则" align="center" show-overflow-tooltip>

3 日期选择问题 会选择上个月

原因：webpack 版本 打包的问题 换 vite 后没问题

// const feeDate = ref('') // 测试 日期组件第一次选择上个月的日期 会提前一个月, 选择当月一个日期后没问题
// todo element-plus 查看版本问题？？
// webpack 版本 打包的问题  换 `vite` 后没问题

4. 日期选择器 时分秒只显示小时

<style>
.add_date_item .el-time-spinner__wrapper {
  width: 100%;
}
.add_date_item .el-time-spinner__wrapper:nth-of-type(2) {
  display: none;
}
</style>

5. 日期选择器也支持前缀了 但是需要改样式

<el-date-picker class="search_start_daterange_picker" style="width: 100%" v-model="searchCreateTimeList" type="datetimerange" @change="startTimeChange" :prefix-icon="startDatePrefix" range-separator="~" start-placeholder="发起时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />

<style lang="scss">
.search_start_daterange_picker {
  .el-range__icon {
    width: 60px;
    font-style: normal;
    font-size: 12px;
    justify-content: flex-start;
  }
}
</style>

6. el-tooltip 嵌套 el-input 空格无法输入问题

瞅瞅源码： 原来 拦截了 space 和   `enter` 事件    

解决： 给 el-tooltip 传参： :triggerKeys="[]"

const tooltipInput= ref('')
<vnet-line title-info="element-plus-components">
  <el-tooltip content="这里输入框不能输入空格，被triggerKeys拦截了键盘事件" placement="top">
    <el-input v-model="tooltipInput"/>
  </el-tooltip>

// 解决 triggerKeys=[]
  <el-tooltip :triggerKeys="[]" content="这是一段内容" placement="top">
    <el-input v-model="tooltipInput"/>
  </el-tooltip>
</vnet-line>