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

问题 一 ：

ts 报错代码规范

 代码如下：

<script setup lang="ts">
import { ref } from "vue";
import { ElTable } from "element-plus";

interface UserTable {
  date: string;
  name: string;
  address: string;
}

const tableData: UserTable[] = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const Selection = ref<UserTable[]>([]);

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const handleSelectionChange = (val: UserTable) => {
  Selection.value = val;
}; //  当选择项发生变化时会触发该事件
</script>

出现的问题如图：

 解决方法如下图：

原来是类型不对

问题 二 ：

页面中如何更改 pinia 中 state 的值

pinia 中 .reHeader.ts 的代码如下：

import { defineStore } from "pinia";

// 切换站点的 请求头存储数据
export  const useHeaderDataStore = defineStore("headerData", () => {
  // state
  // 切换站点的 请求头存储数据
  const reHeaderData = ref<String>('')
  return {
    reHeaderData
  }
})

 .vue 文件中更改的方法，代码如下：

<script setup lang="ts">
   import { useHeaderDataStore } from "@/store/modules/reHeader";

   const useHeaderStore = useHeaderDataStore();
   useHeaderStore.$patch({ reHeaderData: val }); // val就是替换更改的值

   // 打印值，但不能这么打印的，需要在方法里面，这里只是写个例子
   console.log("store", useHeaderStore.reHeaderData);
   // 页面使用 值 
   const newValue = useHeaderStore.reHeaderData;
</script>

问题 三 ：

el-table 中如何自定义表头筛选功能：

<el-table-column property="name" width="120">
    <template #header>
        <el-input />
    </template>
</el-table-column>

el-table 中自定义列表内容：

<template #default="scope"> 
    {{ scope.row.status }}
</template>

问题 四 ：

element 样式丢失问题：

因为 vue-admin-element 已经对element 进行按需加载了，

页面中 又将 import { ElTable } from "element-plus";  再次引入就会出现样式的问题，

将 出现问题的 .vue 文件中引入   import { ElTable } from "element-plus"; 去掉就解决啦。

问题 五：

Ts类型“Date”的参数不能赋给类型“string”的参数：

const date: Date = new Date();
const dateString: string = date.toLocaleString(); // 将 Date 转换为字符串

问题 六： 

el-select 多选赋值回显：

<el-select
   multiple
   collapse-tags
   collapse-tags-tooltip
   :max-collapse-tags="5"
   v-model="formData.publisher"
   :placeholder="lang.select"
   style="width: 100%"
>
   <el-option
      v-for="item in optionsData.publishers"
      :key="String(item.value)"
      :label="item.label"
      :value="String(item.value)"
   />
</el-select>

 解决方法：

// 编辑
function openDialog(row) {
    let publisher = JSON.parse(JSON.stringify(row.publisher_id));
    formData.publisher = publisher.split(",");
}

问题 七：

接口请求用的是 post ，但是参数拼接到url地址栏上：

 将 params 改为 data 就行

问题 八：

el-form 的 resetFields()方法 没有效果 ：

 注意俩点，编辑赋值时需要使用 nextTick ； roleFormRef.value 需要连上 ?. ;

问题 九：

使用 element-plus 中的 el-select  在 placeholder前加 图标：

<el-select
  :disabled="ids.length === 0"
  v-model="modifyValue"
  class="m-2 selectMod"
  placeholder="修改"
>
   <template #prefix>
     <i-ep-edit style="color: #fff" />
   </template>
   <el-option label="选中修改" value="1" />
   <el-option label="筛选修改" value="2" />
</el-select>

具体可以看 下方链接跳转：

https://www.cnblogs.com/luckybaby519/p/16776534.html

问题 十：

使用 el-form 表单验证一进页面就自动验证的问题：

如下图： 一进页面俩下拉框就会自动验证

解决方法：

进来使用表单清空