篇章二 -- 开发admin-element-vue3+ts+vite项目中遇到的各种问题

问题一：

Vue3+ElementPlus 中 el-date-picker 默认当前时间和限制选择的时间范围：

默认当前时间

限制时间范围

const disabledDateFn = (time: Date) => {
  // 定义禁止选择的时间范围
  const now = new Date();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const targetDate = new Date(
    time.getFullYear(),
    time.getMonth(),
    time.getDate()
  );
  return targetDate < today; // 禁用今天之前的日期
};

需求是俩个 <el-date-picker> 那结束时间一定不能小于开始时间 在表单里做限制

const disabledStartTime = (time: Date) => {
  // 定义禁止选择的时间范围
  const now = new Date();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const targetDate = new Date(
    time.getFullYear(),
    time.getMonth(),
    time.getDate()
  );
  return targetDate < today; // 禁用今天之前的日期
};
const disabledEndTime = (time: Date) => {
  // 定义禁止选择的时间范围
  const now = new Date(formData.startTime);
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const targetDate = new Date(
    time.getFullYear(),
    time.getMonth(),
    time.getDate()
  );
  return targetDate < today; // 禁用比开始时间之前的日期
};

下面就是在表单里面做验证提示： 

const rules: any = reactive({
  endTime: [
    {
      validator: validateEndTime,
      required: true,
      trigger: ["blur", "change"],
    },
  ],
});

const validateEndTime = (rule: any, value: any, callback: any) => {
  if (value) {
    if (endTime()) {
      callback();
    } else {
      callback(new Error("1111));
    }
  } else {
    callback(new Error("2222));
  }
};

// 对比开始时间 结束时间
const endTime = () => {
  const start = new Date(formData.startTime);
  const startToday = new Date(
    start.getFullYear(),
    start.getMonth(),
    start.getDate(),
    start.getHours(),
    start.getMinutes(),
    start.getSeconds()
  );
  const begin = new Date(formData.endTime);
  const beginToday = new Date(
    begin.getFullYear(),
    begin.getMonth(),
    begin.getDate(),
    begin.getHours(),
    begin.getMinutes(),
    begin.getSeconds()
  );
  return startToday < beginToday;
};

问题二：

在 .Vue文件中引入 .css，.scss等文件

直接在 <style> 里面  @import 引入就好了

问题三： 

el-plus 表单验证数字问题：

问题四：

Ts 用策略模式代替 if else 报的类型问题：

修改如下：

(tacticsType as any)[name](name);

问题五：

el-table 里面使用树形表格 一键展开子节点和收起

 

 

需要添加两个属性

注意 两个属性需要的参数！！！
row-key:意思是要通过什么字段来处理默认展开，这个字段不能重复，需要的是方法或是字符串，返回ID或标识字段是数字类型的需要用方法处理下
expand-row-keys:这个卡了半天，返回的是所有需要展开的数据项的id的集合数组，例如要展开123项，这三项id是1，2，3，则这和数组是[‘1’,‘2’,‘3’]

在上面的例子中，设置了 row-key 属性来指定行的 key 为 id，并将 expand-row-keys 设置为包含 1 和 3 的数组，这样在加载表格时这两行会自动展开。

:row-key="(row) => row.id"
expand-row-keys="[1, 3]"
:default-expand-all="treeUnfold"
//
let treeUnfold = ref(false);
const handleUnfold = () => {
  treeUnfold.value = !treeUnfold.value;
};

这里遇到个问题： 开发环境展开收起子节点是没问题，但是在生产环境就不行。

目前我也不知道是什么原因造成这种情况的出现，有知道的请评论告知，非常感谢！

于是我用另一种方案来实现展开收起的功能，如下：

// 展开树形结构
let treeUnfold = ref(false); // 按钮控制
let dataTableRef = ref();
const handleUnfold = () => {
  // 获取所有具有展开图标的元素
  const expanded: any = document.getElementsByClassName(
    "el-table__expand-icon"
  );
  if (expanded) {
    for (let i = 0; i < expanded.length; i++) {
      // 点击事件：触发展开图标的点击事件
      expanded[i].click();
    }
    treeUnfold.value = !treeUnfold.value;
  }
};