问题 一 :
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 表单验证一进页面就自动验证的问题:
如下图: 一进页面俩下拉框就会自动验证
解决方法:
进来使用表单清空