前端

下拉选项框组件

下拉选项框当没有子层内容时，这个选项框设置为不能被选中（禁用）：

<template>
  <el-cascader
    v-model="item.methods"
    :options="confirmDialog.data?.methods"
    :props="cascaderProps"
    placeholder="请选择"
    style="width: 200px;"
  />
</template>

<script setup>
import { reactive } from 'vue';

const item = reactive({
  methods: [],
});

// 数据类型介绍
const confirmDialog = reactive({
  data: {
    methods: [
      {
        value: '1',
        label: '选项1',
        children: [], // 空数组，应该禁用
      },
      {
        value: '2',
        label: '选项2',
        children: [
          {
            value: '2-1',
            label: '子选项2-1',
          },
        ],
      },
    ],
  },
});

// 下拉选项框当没有子层内容时，这个选项框设置为不能被选中
const cascaderProps = {
  //允许选择任意一级，最外层也可被选中
  //checkStrictly: true,
  disabled: (data) => {
    return data.children && data.children.length === 0;
  },
};
</script>

实现效果：

---

页面跳转

页面的跳转有两种情况，在当前的页面上进行跳转；打开一个新的页面进行跳转

在当前页面的基础上进行跳转：通过动态路由router进行跳转

import { useRouter } from 'vue-router'
const router = useRouter()
function goToPage(data) {
    router.push(`/pidPreview/?id=${data.id}`)
}

新开一个页面，在新开的页面上进行跳转：也是通过动态路由进行跳转，但是使用window.open新开一个窗口：

import { useRouter } from 'vue-router'
const router = useRouter()
function goToPage(data) {
    const routeUrl = router.resolve({
        path: `/pidPreview/`,
        query: { id: data.id }
    });
    window.open(routeUrl.href, '_blank');
}

window.open(routeUrl.href, '_blank'); 是 JavaScript 中用于在新窗口或新标签页中打开指定 URL 的代码，具体介绍：

• window.open: 是 JavaScript 的一个内置函数，用于打开一个新的浏览器窗口或标签页，它可以接受三个参数：

  • URL: 要打开的页面的 URL

  • target: 指定新窗口的名称或目标，常见的值包括：

    • _blank（在新窗口或标签页中打开）

    • _self（在当前窗口中打开）

    • _parent（在父框架中打开）

    • _top（在顶层框架中打开）

  • windowFeatures（可选参数）: 可以指定新窗口的特性，如大小、位置等。这个参数在现代浏览器中通常被忽略，因为浏览器可能会阻止弹出窗口

报错收集 - 1

报错：Invalid prop: type check failed for prop "span". Expected Number with value 12, got String with value "12".

这个错误提示很明确：prop "span" 期望接收的是数值类型（Number） 的 12，但实际传入的是字符串类型（String） 的 "12"。

这通常发生在使用 Element UI（或类似 UI 框架）的栅格组件（如 el-col）时，span 属性需要传递数字类型的值，而你可能误传了字符串。

解决方案：将字符串转为数字

1. 直接传递数字（推荐）

在模板中去掉引号，直接传递数字：

<!-- 错误写法：传递了字符串 "12" -->
<el-col span="12">内容</el-col>

<!-- 正确写法：传递数字 12 -->
<el-col :span="12">内容</el-col>
<!-- 或更简洁（对于静态值） -->
<el-col span=12>内容</el-col>

2. 若值来自变量（可能是字符串类型）

如果 span 的值来自变量（如从接口获取的字符串），需要手动转为数字：

<template>
  <!-- 用 Number() 或 parseInt() 转换 -->
  <el-col :span="Number(spanValue)">内容</el-col>
</template>

<script>
export default {
  data() {
    return {
      spanValue: "12" // 假设这是一个字符串类型的变量
    };
  }
};
</script>

原因分析

UI 框架的 span 属性（如栅格布局中控制列宽的属性）通常会在内部做类型校验，明确要求传入 Number 类型。

当你写成 span="12" 时，Vue 会将其解析为字符串 "12"；而写成 :span="12" 时，Vue 会解析为数字 12（:span 是 v-bind:span 的简写，用于绑定表达式，表达式 12 会被解析为数字）。

总结

• 对于静态值，用 :span="12" 或 span=12（省略引号）传递数字。
• 对于动态值（变量），确保变量是 Number 类型，或用 Number() 转换后再传递。

这样就能满足 span 属性的类型要求，解决该错误。