{
path: '/room',
component: () => import('@/views/room/index.vue'),
meta: { title: '问诊室' },
// 进入页面时
// 支付成功的路径
// http://localhost/room?orderId=6894437131526144&payResult=true&type=2
//支付成功的查询参数 ?orderId=6891848461864960&payResult=true&type=2
beforeEnter(to) {
if (to.query.payResult === 'false') return '/user/consult'
}
}1. 设置滚动条样式
.cardList {
padding: 55px 10px 16px;
display: flex;
overflow: hidden;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
max-width: 1672px;
margin: 0 auto;
&::-webkit-scrollbar {
// 滚动条整体 background: none;
}
&::-webkit-scrollbar-thumb {
//滑块 background: #112D98;
border-radius: 5px;
cursor: pointer;
}
&::-webkit-scrollbar-track {
//轨道
}
&::-webkit-scrollbar-button {
//两端按钮
}
&::-webkit-scrollbar-track-piece {
//滚动条中间部分
}}
}
2. flex布局 gap属性
1. 固定卡片宽度, 计算左边距, 5的倍数为0, 但是一行没有五个时,会出现问题
margin-left: calc((100% - 348px*5)/4);
&:nth-child(5n + 1) { margin-left: 0; }
2. 使用gap属性, 固定间隔,计算宽度
gap: 0px 13.5px;
width: calc((100% - (4 * 13.5px)) / 5);
3.1 预览excel文件
1. 下包
npm i luckyexcel
2. index.html文件cdn引入css样式
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css"/><script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script><script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
3. vue页面
<template>
<button @click="viewExcel">点击预览</button>
<div id="fileView"> </div></template><script setup>import LuckyExcel from 'luckyexcel';const excelView = (url) => { // 加载 excel 文件 LuckyExcel.transformExcelToLuckyByUrl(url, '', (exportJson, luckysheetfile) => { if (exportJson.sheets == null || exportJson.sheets.length == 0) { message.error('文件读取失败!'); return; } // 销毁原来的表格 window.luckysheet.destroy(); // 重新创建新表格 window.luckysheet.create({ container: 'fileView', // 设定DOM容器的id showtoolbar: false, // 是否显示工具栏 showinfobar: false, // 是否显示顶部信息栏 showstatisticBar: false, // 是否显示底部计数栏 sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置 allowEdit: false, // 是否允许前台编辑 enableAddRow: false, // 是否允许增加行 enableAddCol: false, // 是否允许增加列 sheetFormulaBar: false, // 是否显示公式栏 enableAddBackTop: false, //返回头部按钮 data: exportJson.sheets, //表格内容 title: exportJson.info.name, //表格标题 }); });};
// 预览文件const viewExcel = () => { deActiveIndex.value = '2' excelView('http://192.168.3.31/IoT%E5%8A%9F%E8%83%BD%E6%B8%85%E5%8D%95.xlsx')}</script>
<style scoped lang="scss">#fileView { margin: 0px; padding: 0px; position: absolute; width: 100%; height: 728px; left: 0px; top: 30px; bottom: 0px;}</style>
3.2 sheetjs预览 xls文件 二进制转JSON 转HTML table样式
1. 下载
yarn add https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz
2. 引用
<template><div ref="tableau" v-html="html"></div></template>
<script setup>
import { read, utils, writeFileXLSX } from 'xlsx';
const html = ref("");
const tableau = ref();
const rows = ref([]);
async function readFile(url) {
const f = await fetch(url);
const ab = await f.arrayBuffer();
const wb = read(ab);
html.value = utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]);
// const ws = wb.Sheets[wb.SheetNames[0]];
// rows.value = utils.sheet_to_json(ws);
}
function exportFile() {
const wb = utils.table_to_book(tableau.value.getElementsByTagName("TABLE")[0])
writeFileXLSX(wb, "SheetJSVueHTML.xlsx");
}
readFile('/IoT.xlsx')
</script>
<style scoped lang="scss">
:deep(table) {
width: 100% !important;
border: 1px solid #333;
overflow: auto;
border-collapse: collapse;
tr {
background-color: #00000008;
border-top: 1px solid #dadde1;
&:nth-child(2n) {
background-color: var(--ifm-table-stripe-background);
}
td{
height: 24px!important;
text-align: center;
border: 1px solid #333;
}
}}
</style>
4. element进度条组件
5. plugin
"unplugin-auto-import": "^0.15.0",
import viteAutoImport from 'unplugin-auto-import/vite';
plugins: [
vue(),
viteAutoImport({
imports: ['vue', 'vue-router'],
eslintrc: {
enabled: true,
},
}),
],
"unplugin-vue-components": "^0.25.1",
6. base64图片地址
"data:image/gif;base64," + res.url;
7. element -tree 树形节点
<el-tree :data="data"
ref="tree"
:props="defaultProps"
node-key="id"
show-checkbox
check-strictly
class="stafftree" @check="checkBtn2" :filter-node-method="filterNode2":props="{ class: customNodeClass }" @check-change="handleNodeClick"/>
// 设置直选中一个节点
handleNodeClick (data, checked) {
if (checked) {
this.$refs.tree.setCheckedNodes([data])
this.selectNode = data
}
}
// 自定义节点类名
const customNodeClass = (data, node) => {
if (data.isPenultimate) {
return 'is-penultimate'
}
return null
}
// node-key='id' 修改节点Id 还有标签label
const defaultProps = {
children: "children",
label: "userName",
id: "userName"
};
//当前选中节点
function checkBtn2(current, total) {
goodsList.value = treeRef2.value.getCheckedNodes(true);
}
// 清空节点
function clearAllBtn() {
nameList.value = [];
treeRef.value.setCheckedKeys([], false);}
// 过滤节点
const filterNode2 = (value, data) => {
if (!value) return true;
return data.label.includes(value);
};
<style>
//一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框
::v-deep .stafftree > .el-tree-node {
//叶子节点显示复选框，其他节点不显示复选框
.is-leaf~.el-checkbox .el-checkbox__inner {
display: flex;
}
.el-checkbox__input>.el-checkbox__inner {
display: none;
}
}
// //非一级节点
::v-deep .stafftree > .el-tree-node__children {
//节点展开显示复选框
.expanded~ .el-checkbox .el-checkbox__inner {
display: flex;
}
.el-checkbox__input>.el-checkbox__inner {
display: none;
}
}
</style>
sheetjs 导出excel 合并单元格, 图片
blog.csdn.net/weixin_4314…blogsobaiduweb~default-1-120986689.nonecase&spm=1018.2226.3001.4450
