element-plus + V3 + typeScript 第一次遇到的问题

1. element-plus日期选择器可以多选问题

将type='dates'改成type='date'

原代码

<el-date-picker 
    v-model="formLabelAlign.date"
    type="dates" 
    format="YYYY-MM-DD" 
    value-format="YYYY-MM-DD"
    placeholder="请选择时间"
/>
//打印结果
//['2023-05-02','2023-05-03','2023-05-04']

修改后

<el-date-picker 
    v-model="formLabelAlign.date" 
    type="date" 
    format="YYYY-MM-DD" 
    value-format="YYYY-MM-DD"
    placeholder="请选择时间" 
/>
//打印结果
//'2023-05-02'

2. router配置import =>()报错

有shims-vue.d.ts文件里面的这段导出vue声明代码为什么router配置import还报错说没声明

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

报错代码

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    meta: { title: "首页" },
    component: () => import('@/views/index.vue'),
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'dashboard',
        meta: {
          title: '首页'
        },
        component: () => import('@/views/dashboard/index')  //这里
      }
    ]
  },
]

原因：声明的是.vue结束的文件，import地址要写全

     {
        path: 'dashboard',
        name: 'dashboard',
        meta: {
          title: '首页'
        },
        component: () => import('@/views/dashboard/index.vue')
      }

3. 变量值变了但是dom视图没有更新

let language = reactive({})
language={a:1,b:2}

html页面不更新视图
原因：直接赋值替换了原有的响应式数据

//修改后 ：
let language = shallowRef({})
    language.value={a:1,b:2}
//或
let language = reactive({language:{}})
   language.language={a:1,b:2}

4. el-table 操作row直接赋值会替换掉响应式

使用el-table的时候有时候修改是在行内整个给scope.row赋值，vue2有$set方法，但是vue3移除了$set方法，所以会将scope.row的响应式替换掉导致视图无法更新

let onEditCancle = (scope: any) => {
    scope.row = oldVal.value;
    scope.row.isEdit = false;
}

修改后：

let onEditCancle = (scope: any) => {
    oldVal.value.isEdit = false;
    for (let key in oldVal.value) {
        scope.row[key] = oldVal.value[key]
    }
    scope.row.isEdit = false;
}

5. vue3+typeScript类型声明问题

原代码：

<paganation 
v-model:current-page="pageParams.page" 
v-model:page-size="pageParams.limit"
:page-sizes="[20, 50, 100, 200]" 
background 
layout="total, sizes, prev, pager, next, jumper"
:total="totals"
@size-change="onSizeChange" 
@current-change="onPageChange"></paganation>

let totals: number = ref(0)
//错误信息：不能将类型“Ref<number>”分配给类型“number”

修改后：

let totals = ref<number>(0)
//或
let totals: number = ref(0).value

原因：ref(0)返回的是一个Ref<number>类型的值，而不是一个number类型的值，不能将一个Ref<number>类型的值分配给一个number类型的变量。

6. vue2打包后无法在本地使用，vue.config.js配置了public:'./'打开index.html也会报错chunk.js等文件路径跨域

在打包的时候发现vue会打包两次，我怀疑是第二次替换掉第一次以后里面的一些文件被修改了。经搜索发现可能是浏览器设置了ie然后为了兼容vue会打包两份。于是修改.browserslistrc配置

原代码

>0.01%
last 2 versions
not dead

修改后

>1%
last 2 versions
not dead
not ie 11

然后执行npm run build 只打包一次，index.html资源引入也不报错文件可以正常打开了