js学习 时间选择器 模糊查询 select选择选项居中

const 声明的常量不可以改变：

比如 const a = 1,const b =3,这些就不可以改变，

但是如果const 声明的是对象或者函数，那么，这些是可以改变的

比如：弹窗的打开是通过visible 的true 和false 来控制的，那么声明的对象可以是：

const showVisible = ref(false); 然后在watch 上面监听 传递过来的 visible,

另外的经验： 比如时间选择器上

          <!-- 这里的时间选择的值不做过滤：value-format="YYYY-MM-DD"，传递给后端的值的格式为  2022-05-13T16:00:00.000Z -->
          <el-date-picker
            v-if="column.type === 'daterange'"
            v-model="currentParams[column.prop]"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="defaultTime"
            format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          >
          </el-date-picker>

这个时间选择器上有开始时间和结束时间两个内容，但是如果业务要求开始时间和结束时间是各自一个参数，那么，你可以在查询的时候赋值，在查询的参数上多加一个例如，prop 的是createTime,这个不是默认参数，使自己加的，多一个参数对后端影响不大，

然后查询的时候判断，createTime 是否为空，是则不处理，有值，那就把开始时间和结束时间赋值：

const onSearch = () => {
  if (searchParams.value.createTime !== null) {
    searchParams.value.relationStartTime = searchParams.value.createTime['0'];
    searchParams.value.relationEndTime = searchParams.value.createTime['1'];
  }
};

把createTime的第0 个值赋值给开始时间，把createTime的第1 个值赋值给结束时间，

另外还有一个不用赋值的操作，那就是直接的prop,时间选择器直接传两个参数，但是要看业务场景，有时候产品经理设计上觉得不好看，那你就得换掉；

模糊查询：模糊查询的重要部分就是一个查询参数的map ，同时也是自己对组件的理解：

查询方法：

remoteMe = async (val?: any) => {
  const { data } = await searchName({ tenantName: '' });
  searchColumns.value.map((item) => {
    if (item.prop === 'tenantIds') {
      item.dictData = data.tenantList;
      return item;
    }
    return item;
  });
};

下拉选择居中样式设置

          <!-- 给下拉选项设置居中 -->
          <el-select v-if="column.type === 'select'" @change="onSearched" v-model="currentParams[column.prop]" v-bind="column.formAttrs" clearable class="w-full" :teleported="false" popper-class="select-popper">
            <el-option
              v-for="dictOpt in getOptionData(column)"
              :key="dictOpt[column.dictValueName ? column.dictValueName : 'value']"
              :value="dictOpt[column.dictValueName ? column.dictValueName : 'value']"
              :label="dictOpt[column.dictLabelName ? column.dictLabelName : 'label']"
              v-bind="column.formAttrs"
            ></el-option>
          </el-select>


:deep(.select-popper) {
  .el-select-dropdown__item {
    text-align: center;
  }
}

其中，:teleported="false" popper-class="select-popper" 这里的代码才是重点改变选项样式的，teleported：是否将下拉列表插入至 body 元素，在弹出框的定位出现问题时，可将该属性设置为 false，之前用的是popper-append-to-body，但是2.1.0版本后弃用，可以用但是会警告也会生效，popper-class：Select 下拉框的自定义类名

样式穿透的时候注意权重的问题，比如elementUI 的上下级关系，想要穿透权重就要加！important