‍ el-table 前端自己加序号el-table-columnlabel序号aligncentertypeindexwidth50template slot-scopescope{{(queryParams.pageNum -1)* queryParams.pageSize scope.$index1}}/template/el-table-column## ‍ 具名插槽bashSearch actiononSearchAction:showFields[ appendType, nianFen, xzcode, shiBm, xianBm, danWeiMc, quanShuMc, qiYuanMc, forCode ]template#buttonsElButtontypeprimaryclickUnforeseeableManagement不可预见管理/ElButton/template/Search// v-if$slots.buttons判断有没有插槽el-form-item v-if$slots.buttonsslotnamebuttons/slot/el-form-item‍ 深拷贝数据“lodash”: “^4.17.21”,import{cloneDeep}fromlodashconst datacloneDeep(currentEditRow.value)‍给导出得变量起别名 as导出events 重新命名emitterimport { events as emitter } from /utils/mitt;‍给树的节点设置children1. el-tree reftreeRef :propsdefProps :dataprops.data :default-expand-allfalse :default-expanded-keysappStore.threeSpacesDefaultExpandedKeys :filter-node-methodfilterMethod node-keyid classcus-tree node-expandonNodeExpandClick / 2. const treeRef refInstanceTypetypeof ElTree(); 3. // 给节点设置Children function setChildren(key, data) { // key 是父节点的key ,data是Children treeRef.value.updateKeyChildren(key, data); }‍ 动态引入图片const images import.meta.glob(/assets/**/*.{jpg,jpeg,png}, { eager: true, import: default }) export function getAssetsFile(name: string ) { return (images[/src/assets/${name.replace(/^\//, )}] || name) as string } 4.暴露 defineExpose({ setChildren }); ----- 5. cus-tree2 refcusTree5Ref v-if appStore.isQuxian || appStore.isGaoxingqu || appStore.isLiangpingqu :datatab?.children ?? [] on-checkedonChecked /cus-tree2 6. const cusTree5Ref ref(); 7. // 只能这样赋值 才能响应 nextTick(() { if (!cusTree5Ref.value?.length) return; cusTree5Ref.value[0].setChildren(catalog.id, children); }); 8.注意看 cusTree5Ref.value 是不是数组数组就取下标。不是数组就直接用cusTree5Ref.value。‍ vite 分包build: { rollupOptions: { output: { manualChunks(id, config) { console.log(id); if (id.includes(node_modules)) { return id .toString() .split(node_modules/.pnpm/)[1] .split(/)[0] .toString(); } }, // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值 entryFileNames: js/[name].[hash].js, // 用于命名代码拆分时创建的共享块的输出命名 chunkFileNames: js/[name].[hash].js, // 用于输出静态资源的命名[ext]表示文件扩展名 assetFileNames(assetInfos) { if (assetInfos.name.endsWith(.css)) { return css/[name]-[hash].css; } return [ext]/[name]-[hash].[ext]; }, }, }, },‍ 定义变量为两种类型都可layerid: number | string‍ 路由改为hash模式1.router/index.td import { createRouter, createWebHashHistory } from vue-router import Layout from /layout/index.vue const router createRouter({ // history: createWebHistory(import.meta.env.BASE_URL), history: createWebHashHistory(), 2.index.html不然回跑到代理得那个根路径下面去就GG了 script src./config.js/script 3.vite.config.ts export default defineConfig({ base: ./, //这里这里‍计算属性带参数const calcWidth computed(() { return (num1: number, num2: number) { if (num1 num2) { return 100% } else { const p ((num1 / num2) * 100).toFixed(0) % return p } } })‍计算属性带参数const calcWidth computed(() (length: number) { if (length 6) { return 33.33%; } return calc(100% / ${length}); });‍nextTickimport { nextTick } from vue; nextTick(() { });插槽template v-slot:header‍ watch 需要放在最下面如果调用放在watch 下面的方法 会调用不到产生报错。watch( () cesiumAttrsStore.currentClickBuilding, (val) { val getData(val) } );‍变量取值1、data——唯一需要注意的地方整个 data 这一部分的内容你只需要记住下面这一点。以前在 data 中创建的属性现在全都用 ref() 声明。在 template 中直接用在 script 中记得加 .value 。‍propsconst props defineProps({ propData: { type: Array, default: () { return [] } }, }) //使用 props.propData‍emitsconst emits defineEmits([changeSort]) function changeSort(index: number) { emits(changeSort, index) }‍字符串转变量将字符串转成变量 eval(‘x’) 就是x变量eval(str).valueElMessage 提示import { ElMessage } from element-plus ElMessage({ message: err.message, type: error, })onMounted写法onMounted(() { });‍销毁钩子写法onBeforeUnmount(() { });导入图标import { Search, Fold, Expand } from element-plus/icons-vue##‍ ref 定义节点取节点prop-edit refpropEdit/prop-edit const propEdit ref(null); 节点值 propEdit.value不能使用同一变量名赋值不能使用 a.value a‍storestore 里面没有 mutations 只有 action ,import dataCenter from /stores/dataCenter const dataCenterStore dataCenter() dataCenterStore.xxx()插槽template v-slot:header/template‍图标el-button typeprimary :iconSearchSearch/el-button‍变量reactive定义的变量 不需要 .value :定义对象。某个属性变化 :不能替换整个对象 ref定义的变量 需要 .value‍计算属性计算属性const fullName computed({ // getter get() { return firstName.value lastName.value }, // setter set(newValue) { // 注意我们这里使用的是解构赋值语法 [firstName.value, lastName.value] newValue.split( ) } })‍v-for 循环对象li v-for(value, key, index) in myObject {{ index }}. {{ key }}: {{ value }} /li‍reverse() 和 sort() 的时候务必小心这两个方法将变更原始数组‍!-- 错误 -- textarea{{ text }}/textarea !-- 正确 -- textarea v-modeltext/textarea‍ inputinput v-model.numberage / input v-model.trimmsg /‍响应式对象可以使用 Object.assign(obj1,obj2)‍vue3里面没有filter 过滤改用函数或者计算属性!-- {{ row.createTime | filterTime }} -- filters: { filterTime(val) { return val ? parseTime(val) : val } },‍ router routeimport { useRouter, useRoute } from vue-router const router useRouter() const route useRoute()‍ 判断组件名字v-ifdialogComponent.name ‘ModuleSubscribe’ ||dialogComponent.name ‘batchApplication’