在Web应用开发中，前端常常要展示数据列表，数据较多时就要对查询结果进行分页，只显示当前页的数据，一方面不会造成数据列表过长，另一方面减少每次查询和返回的数据量。Laravel 中实现数据分页非常简单，使用 Element-UI 完成分页数据的前端展示同样非常简单。
2024年08月11日
在Web应用开发中，前端常常要展示数据列表，数据较多时就要对查询结果进行分页，只显示当前页的数据，一方面不会造成数据列表过长，另一方面减少每次查询和返回的数据量。Laravel 中实现数据分页非常简单，使用 Element-UI 完成分页数据的前端展示同样非常简单。
2024年08月11日
关于设计，关于loading动效
申明:这篇经验为我在看了各个等平台上很多大神的文章总结而出。很多词汇并非原创，再次向原作者表示感谢。
文章主要分为以下几个部分：
What？ 什么是loading动画？
Why？ 设计loading动画的意义有什么?
2024年08月11日
注意：一定要按照合并列排序。
<body>
<div class="dashboard-container" id="order-app" v-loading="loading">
<div class="container" >
<!-- 搜索项 -->
<div class="tableBar">
<template>
<div>
<el-table :data='table' border fit :span-method="objectSpanMethod">
<el-table-column prop="checkRoom" label="检查房间"> </el-table-column>
<el-table-column prop="checkProject" label="检查项目"> </el-table-column>
<el-table-column prop="checkMoney" label="检查费用"> </el-table-column>
<el-table-column prop="attention" label="注意事项"> </el-table-column>
<el-table-column prop="appointmentTime" label="预约时间"> </el-table-column>
</el-table>
</div>
</template>
</div>
</div>
let vue1 = new Vue({
el: '#order-app',
data() {
return {
//表格数据
table: [{
id: '1',
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT',
checkMoney: '300.22',
attention: '检查前空腹',
appointmentTime: ''
}, {
id: '1',
checkRoom: 'DR',
checkProject: '颈椎MRICT22',
checkMoney: '340.22',
attention: '检查前空腹',
appointmentTime: '2019-5-29 10：30'
}, {
id: '2',
checkRoom: 'DR',
checkProject: '鼻骨',
checkMoney: '500.22',
attention: '检查前空腹',
appointmentTime: '2019-5-29 9：30'
}
,
{
id: '1',
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT1',
checkMoney: '303.22',
attention: '检查前空腹',
appointmentTime: ''
},
],
}
},
created() {
// 给table赋值，重新遍历新增rowSpan属性，checkRoom，appointmentTime为table里面需要合并的属性名称，根据自己需要给表赋值
this.table = this.mergeTableRow(this.table, ['checkRoom'])
},
mounted() {
},
methods: {
objectSpanMethod({ row, column }) {
const span = column['property'] + '-span'
if (row[span]) {
return row[span]
}
},
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data
}
merge.forEach((m) => {
const mList = {}
data = data.map((v, index) => {
const rowVal = v[m]
if (mList[rowVal]) {
mList[rowVal]++
data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
v[m + '-span'] = {
rowspan: 0,
colspan: 0
}
} else {
mList[rowVal] = 1
v[m + '-span'] = {
rowspan: 1,
colspan: 1
}
}
return v
})
})
return data
}
}
}
);
</script>
</body>
2024年08月11日
我们都知道表格是横向渲染的，一行一行去展示。不过博主这里有个需求是纵向渲染，一列一列去展示…嗯[思考]…做出来了，下面是全部代码，可拿过去自行取用。
2024年08月11日
sparrow-js 提供两个重要提升研发效率的设计：一个是编辑区块，一个是搜索组件，本次主要介绍编辑区块部分的设计思路；采用自问自答的方式说明编辑区块的由来。
2024年08月11日
管理页面
主要就是mybatis-plus使用，以及前端表单验证。
MyBatis是一款非常热门的数据操作层（持久层）框架。
优点：
2024年08月11日
如果是已经有点经验的同学，可以直接看下面这个函数，应该就能明白怎么回事，新手可以看下面的详细教程。
函数：