太原市建设北路小学网站,如何编写代码,做网站哪个行业比较有前景,信息流广告优化师培训菜鸟一直在纠结这个写不写#xff0c;因为不难#xff0c;但是菜鸟老是容易忘记#xff0c;虽然想想或者搜搜就可以马上写出来#xff0c;但是感觉每次那样就太麻烦了#xff0c;不如一股做气写了算了#xff0c;后面遇见别的就再来补充#xff01; 文章目录 table 表格…菜鸟一直在纠结这个写不写因为不难但是菜鸟老是容易忘记虽然想想或者搜搜就可以马上写出来但是感觉每次那样就太麻烦了不如一股做气写了算了后面遇见别的就再来补充 文章目录 table 表格自定义内容select 显示的是valueupload 使用 —— 一个文件多个文件可以借鉴el-dialog 使用一定要用一个参数接收 defineProps不要再 el-dialog 上加class element plus 和 px2rem 不兼容错位的图标element plus自己的bug巨大的图标 table 表格自定义内容
el-table-column label操作 width230template #defaultscopeel-button typeprimary sizesmall详情/el-buttonel-popconfirm :title$t(deleteprompt) confirmdeleteEvent(scope.row)template #referenceel-button typedanger sizesmall删除/el-button/template/el-popconfirmel-button typeprimary sizesmall :disabledscope.row.status 0分享/el-button/template
/el-table-columnselect 显示的是value
之所以显示为 value 就是因为你 v-model 所给的值和 el-option 的 value 不一致最常见的就是 0 和 ’0‘ 了
upload 使用 —— 一个文件多个文件可以借鉴
el-upload 的 html 部分
el-upload classupload-demo refupload action# :auto-uploadfalse :limit1 :on-changeonFun :on-exceedhandleExceed :on-removeremoveFuntemplate #triggerel-button typeprimary选择文件/el-button/templateel-button classuploadtext typesuccess clicksubmitUpload 上传 /el-buttonspan classtip clickdownloadFile(模板, downloadUrlArr[formdata.formType]) 下载模板 /spantemplate #tipdiv classel-upload__tip text-red* 只能上传excel文件/div/template
/el-uploadupload 逻辑
// 获取el-upload元素方便后面清空
const upload ref();
// 提交使用
let fd null;
// 上传事件
function onFun(file) {if (file.name.indexOf(.xls) 0 || file.name.indexOf(.xlsx) 0 || file.name.indexOf(.xlsm) 0) {fd new FormData();fd.append(file, file.raw); //传文件} else {upload.value.clearFiles();// eslint-disable-next-lineElMessage({message: 请选择excel文件,type: error,});}
}
// 删除文件事件
function removeFun() {upload.value.clearFiles();
}
// 提交第二个文件事件
const handleExceed (files) {// console.log(files);upload.value.clearFiles();const file files[0];upload.value.handleStart(file);
};
// 提交事件 -》 这部分按逻辑自行更改
const submitUpload () {uploadFile(fd).then((res) {if (res.code 200) {console.log(res);} else {// eslint-disable-next-lineElMessage({message: res.message,type: error,});}}).catch((err) {console.log(err);});
};下载逻辑
这个就是菜鸟插一嘴想写写因为下载和请求接口的逻辑不太一样只需要访问就行了菜鸟有时候也容易忘记所以这里记一下
// 枚举类型
const downloadUrl localStorage.getItem(downloadUrl); // 这个菜鸟在不同环境设置的值不同
const downloadUrlArr [${downloadUrl}/user/downloadExcel];// 下载表单
function downloadFile(filename, url) {let a document.createElement(a);a.style display: none; // 创建一个隐藏的a标签a.download filename;a.href url;document.body.appendChild(a);a.click(); // 触发a标签的click事件document.body.removeChild(a);
}这里界面上调用的是数组是因为可能不止一个地址菜鸟把地址列举成为枚举属性了可能不太好
el-dialog 使用
菜鸟发现官网里面都是直接在一个文件里面使用但是一般 el-dialog 都是在组件里面封装的所以菜鸟就自己试了一下结果问题就来了这里记录一下
vue2 使用 elementui dialog 的逻辑可以看看我的这篇博客elementui 的 dialog 常用逻辑总结 现在发现写得不太好但是勉强可以看 T——T
vue3 的坑主要在于vue3单向数据流但是这个 el-dialog 又要v-model绑定所以就会报错但是好在发现官网还有一种绑定方式那就是 modelvalue
这里菜鸟就写个简单的例子
父组件
script setup
import Detail from ./components/detail.vue;// 详情弹窗
let editshow ref(false);
let detailencodedCode ref();
// 打开
const showDetail (data) {detailencodedCode.value data.encodedCode;editshow.value true;
};
// 关闭
function hideEdit() {editshow.value false;
}
/scriptel-table-column label操作 width230template #defaultscopeel-button typeprimary sizesmall clickshowDetail(scope.row)详情/el-button/template
/el-table-column!-- 详情弹窗 --
Detail v-ifeditshow :pwddetailencodedCode :dialogVisibleeditshow closeEventhideEdit/Detaildialog 组件
script setup
import { ref } from vue;
import { getShareDetail } from ../../../network/api.js;// eslint-disable-next-line
const props defineProps({dialogVisible: {type: Boolean,default: false,},pwd: {type: String,default: ,},
});// eslint-disable-next-line
const emit defineEmits([closeEvent]);// 关闭弹窗
function handleClose() {emit(closeEvent, false);
}
const dialogBox ref()
function closeDialog() {dialogBox.value.resetFields();
}
/scripttemplatedivel-dialog title详情 refdialogBox :modelValuedialogVisible :before-closehandleClose closecloseDialogp暂无数据/ptemplate #footerdivel-button clickhandleClose关闭/el-button/div/template/el-dialog/div
/template注意 这里的组件封装有两个问题需要注意
一定要用一个参数接收 defineProps
虽然在 template 里面可以直接使用 defineProps 里面的变量比如dialogVisible 但是 js 里面是不能直接访问的会提示没有定义只能通过props.pwd 访问当然接收的变量名自己定义就行不一定要是props
不要再 el-dialog 上加class
如果你给 el-dialog 上加上了class那个你将收获一个警告 Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. element plus 和 px2rem 不兼容
如果你在 element plus 项目中引入了 px2rem那么你可能喜提巨大的图标等
错位的图标element plus自己的bug
解决办法就是在 public 底下的 index.html 中加入
/* 解决 element plus 样式问题 */
.el-icon.el-message__closeBtn {position: absolute !important;
}巨大的图标
解决办法就是在既有 px2rem 又有用到 ElMessage 的界面上加上如下代码
.el-message-icon--error {font-size: 5px;
}
.el-message-icon--success {font-size: 5px;
}
.el-message-icon--info {font-size: 5px;
}记住不要在 style 上加 scoped
