郑州手机网站建设公司,专业微网站建设公司首选公司哪家好,网店美工招聘信息,网站标题图片怎么做在这次使用时恰好整出来了#xff0c;希望大家也能学习到#xff0c;特此分享出来
使用前确保安装以下模块#xff0c;最好全局配置element-plus
### 展示一下 ###
###导出选项 ###
###导入de数据 ###
安装的模块
npm install js-table2excel // 安装js-table2excel
n…在这次使用时恰好整出来了希望大家也能学习到特此分享出来
使用前确保安装以下模块最好全局配置element-plus
### 展示一下 ###
###导出选项 ###
###导入de数据 ###
安装的模块
npm install js-table2excel // 安装js-table2excel
npm install xlsx // 安装xlsx
npm install dayjs // 安装dayjs
npm install axios // 安装axioselement-plus全局配置地址快速开始 | Element Plus
依次根据官网步骤进行引入即可不在过多介绍
接口文件配置例如utlis/api.js
// api.js
import axios from axiosconst api axios.create({baseURL: http://localhost:3000, // 后端接口地址timeout: 5000,
})export default api;
vue页面的构局/前端
样式部分
templatedivel-card classbox-card1div styledisplay: flex; align-items: center;margin: 15px;el-upload action# :show-file-listfalse :before-uploadimportBefore accept.xls,.xlsxstylemargin: 0 12px;display: flex;align-items: center;el-button typesuccess plain表格导入/el-button/el-uploadel-button typesuccess plain clickuserExport导出表格/el-button/divdiv stylemargin-left:1.875rem; margin-top: 2.125rem;el-table :datatableData stylewidth:100% reftableRefel-table-column typeselection width50 aligncenter /el-table-column width100template #defaultscope!-- {{scope.row.name}} --template v-ifscope.row.level 1el-button typedanger round sizesmall重大/el-button/templatetemplate v-else-ifscope.row.level 2el-button typesuccess round sizesmall非重大/el-button/template/template/el-table-columnel-table-column width280template #defaultscopedivh4案件编码:{{ scope.row.anjbm }}/h4/divdivspan案件名称:{{ scope.row.name }}/span/div/template/el-table-columnel-table-column width280template #defaultscopedivspan我方地位:{{ scope.row.mypos }}/span/divdivspan提交时间:{{ dayjs(scope.row.date).format(YYYY-MM-DD hh:mm:ss) }}/span/div/template/el-table-columnel-table-column width200template #defaultscopedivspan案件类型:{{ scope.row.style }}/span/divtemplate v-ifscope.row.status 1divspan案件进展:进展中/span/div/templatetemplate v-else-ifscope.row.status 2divspan案件进展:暂无进展/span/div/templatetemplate v-else-ifscope.row.status 3divspan案件进展:已审理结案/span/div/template!-- divspan状态:{{ scope.row.status 1 ? 进展中 : scope.row.status 2 ? 暂无进展 : 已审理结案 }}/span/div --/template/el-table-columnel-table-column width200template #defaultscopeel-progress :percentagescope.row.schedule //template/el-table-columnel-table-column width280template #defaultscopedivtemplate v-ifscope.row.flag 1el-button sizesmall link新增执行/el-buttonel-button sizesmall text修改执行/el-buttonel-button sizesmall text执行结果/el-button/templatetemplate v-else-ifscope.row.flag 2el-button sizesmall link新增执行/el-button/templatetemplate v-else-ifscope.row.flag 3/template/div/template/el-table-column/el-table/div/el-card
/template功能部分
script setup
import { ElMessage, ElButton, ElLoading } from element-plus
import table2Excel from js-table2excel
import * as XLSX from xlsx
import api from ../utils/api
import dayjs from dayjs;
import { ref, onMounted, reactive, toRefs, h } from vue
import axios from axios
import { ElMessageBox } from element-plus
const dialogVisible ref(false)const state reactive({tableData: [// {// level:1,// anjbm:A202311111009,// name:某某酒驾撞人案件,// mypos:被告,// date:2023-11-19 09:42:09,// style:劳动争议案件,// status:1// schedule:80// flag:1// }], //模拟请求数据exportConfig: [ //导出Excel表格配置{title: 案件级别,key: level,type: text},{title: 案件编码,key: anjbm,type: text},{title: 案件名称,key: name,type: text},{title: 我方地位,key: mypos,type: text},{title: 提交时间,key: date,type: text},{title: 案件类型,key: style,type: text},{title: 案件进展,key: status,type: text},{title: 案件进度,key: schedule,type: text},{title: 功能区,key: flag,type: text},// 图片配置// {// title: 头像,// key: imgs,// type: image// },],formatColumns: [ // 导出特殊字段处理{prop: status,option: {1: 进展中,2: 暂无进展,3: 已审理结案},},{prop: level,option: {1: 重大,2: 非重大,3: 已结案},},]
})
const { tableData, exportConfig, formatColumns } toRefs(state)const tableRef ref()// 表格导出
const userExport () {ElMessageBox({title: 导出Excel表格,draggable: true,showCancelButton: true,showConfirmButton: false,message: h(div, null, [ // 这里用到了h函数h(ElButton, { text: true, type: primary, innerHTML: 导出选中数据, onClick: assignExport }),h(ElButton, { text: true, type: success, innerHTML: 导出所有数据, onClick: allExport })]),cancelButtonText: 取消,}).then((res) { }).catch((res) { })
}// 选中数据导出
const assignExport () {// getSelectionRows Element Plus table表格组件方法获取当前选中的数据let arr tableRef.value.getSelectionRows()if (!arr.length) {return ElMessage({message: 请选择需要导出的数据,type: warning,})}ElMessageBox.close() // 关闭弹出框const loading ElLoading.service({ // 打开遮罩层lock: true,text: 请稍等...,background: rgba(255, 255, 255, 0.5),})let list JSON.stringify(tableRef.value.getSelectionRows())list formatExportData(JSON.parse(list))table2Excel(state.exportConfig, list, 案件进展批量导出)loading.close() // 关闭遮罩层
}// 所有数据导出
const allExport () {ElMessageBox.close() // 关闭弹出框const loading ElLoading.service({ // 打开遮罩层lock: true,text: 请稍等...,background: rgba(255, 255, 255, 0.5),})let list JSON.stringify(state.tableData) // 用定义的数据list formatExportData(JSON.parse(list))table2Excel(state.exportConfig, list, 案件进展全部导出)loading.close() // 关闭遮罩层
}const formatExportData (list) {// 处理特殊字段list.forEach((item) {state.formatColumns.forEach((i) {item[i.prop] i.option[item[i.prop]]})for (let key in item) {if (!item[key] item[key] null) {item[key] }}});return list
}// 表格导入
const importBefore (file) {const reader new FileReader();reader.onload (e) {const data e.target.result;const workbook XLSX.read(data, { type: array });const firstSheetName workbook.SheetNames[0];const worksheet workbook.Sheets[firstSheetName];const results XLSX.utils.sheet_to_json(worksheet);importAdd(results)};reader.readAsArrayBuffer(file);
}const importAdd (list) {// 处理上传时excel中特殊字段list.forEach((item) {state.exportConfig.forEach((i) {item[i.key] item[i.title]delete item[i.title]})for (let key in item) {if (key date) {item[key] ExcelDateToJSDate(item[key])}}})list convertImportData(list)// 调用后台接口进行批量添加api.post(/l/madd, list).then(response {getdata()console.log(res, response.data);return response.data}).catch(error {throw new Error(error)})
}// 处理日期时间
const ExcelDateToJSDate (serial) {// 原始的// var utc_days Math.floor(serial - 25569);// var utc_value utc_days * 86400;// var date_info new Date(utc_value * 1000);// var fractional_day serial - Math.floor(serial) 0.0000001;// var total_seconds Math.floor(86400 * fractional_day);// var seconds total_seconds % 60;// total_seconds - seconds;// var hours Math.floor(total_seconds / (60 * 60));// var minutes Math.floor(total_seconds / 60) % 60;// return new Date(date_info.getFullYear(), date_info.getMonth(), date_info.getDate(), hours, minutes, seconds);// 更改后的引入dayjs包后做的改进return dayjs(serial).format(YYYY-MM-DD hh:mm:ss)
}// 返回上传的Excel文件
const convertImportData (list) {console.log(list);list.forEach((item) {state.formatColumns.forEach((i) {for (let key in i.option) {if (item[i.prop] i.option[key]) {item[i.prop] key}}})for (let key in item) {if (!item[key] item[key] undefined) {item[key] }}});return list
}// 渲染数据的vue3钩子函数,并不会刷新页面
const getdata onMounted(async () {const { data } await axios.get(/l/case/show)state.tableData data.data
})
/script样式自己搭建即可不再演示辣
vue后端接口的布局
之前已经讲解过数据库的搭建mongoose搭建步骤 -----查看创建步骤
也可根据mongoose官网Mongoose.js中文网
以下是各接口的简单搭建
后端展示数据接口
// 数据全部展示
router.get(/case/show,async function(req,res){let dataawait caseprogressModel.find()res.send({code:200,message:caseshow ok,data})
})
后端批量添加接口
// 批量添加接口
router.post(/madd,async function(req, res, next) {const body req.bodyconsole.log(body);const insertedData await caseprogressModel.insertMany(body)res.send({code:200,message:madd ok,data: insertedData})
});
最终效果展示 vue导入导出
