篇章一 -- 开发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 表单验证一进页面就自动验证的问题:

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

解决方法:

进来使用表单清空

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值