面包屑
创建一个面包屑组件
将路由导入然后格式化map对象 key-value
将当前路由的key和value获取然后存入list数组中
遍历list数据,渲染内容
- <!--BreadcrumbCom.vue-->
- <template>
- <el-breadcrumb separator=">">
- <el-breadcrumb-item v-for="item in list" :key="item.name" :to="{ name: item.name }">{
-
- { item.label }}</el-breadcrumb-item>
- </el-breadcrumb>
- </template>
- <script>
- import { routes } from '@/router';
- export default{
- data(){
- //用来记录所有路由对应的label
- this.routesMap = new Map()
- //用来将路由处理成map
- this.initRoutesMap(routes)
- return{
- list:[],
- }
-
- },
- mounted(){
- },
- methods:{
- initRoutesMap(routes){
- routes.forEach(route => {
- this.routesMap.set(route.name, route.label)
- //如果有子路由
- if(route.children){
- this.initRoutesMap(route.children)
- }
- });
- }
- },
- watch:{
- $route:{
- immediate:true,
- handler(route){
- //处理路径
- this.list = route.matched.map(item=>{
- return {
- name:item.name,
- label:this.routesMap.get(item.name)
- }
- })
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .el-breadcrumb {
- margin-bottom: 20px;
- }
- </style>
复制代码 动态菜单
在store/index.js中创建全局变量记录当前路由路径,并创建修改方法
- //记录当前路由路径
- currentPath:'/'
- //修改路由路径的方法
- updateCurrentPath(state, value){
- state.currentPath = value
- }
复制代码 在AsideCom.vue中加载菜单
- <template>
- <el-menu default-active="currentPath" :collapse="collapse" router class="el-menu-vertical-demo">
- <el-menu-item index="/">首页</el-menu-item>
- <el-sub-menu v-for="item in userInfo.checkedkeys" :key="item.path" :index="item.path">
- <template #title>
- <el-icon>
- <Avatar />
- </el-icon>
- <span>{
-
- { item.label }}</span>
- </template>
- <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">{
-
- { child.label }}</el-menu-item>
- </el-sub-menu>
- <!-- <el-sub-menu index="/manager">
- <template #title>
- <el-icon><Avatar /></el-icon>
- <span>账号管理</span>
- </template>
- <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item>
- <el-menu-item index="/manager/userlist">用户列表</el-menu-item>
- </el-sub-menu>
- <el-sub-menu index="/banner">
- <template #title>
- <el-icon><Avatar /></el-icon>
- <span>轮播图管理</span>
- </template>
- <el-menu-item index="/banner/bannerlist">轮播图列表</el-menu-item>
- <el-menu-item index="/banner/addbanner">添加轮播图</el-menu-item>
- </el-sub-menu> -->
- </el-menu>
- </template>
- <script>
- import { Avatar } from '@element-plus/icons-vue';
- import { mapState } from 'vuex';
- export default{
- data(){
- return{
- }
- },
- computed:{
- ...mapState(['currentPath','userInfo'])
- },
- components:{
- Avatar,
- },
- props:['collapse']
- }
- </script>
复制代码 轮播图管理
获取轮播图数据
- //导入封装的axios
- import ajax from "@/utils/axios";
- //获取轮播图列表
- export function bannerList(){
- return ajax({
- method:'GET',
- url:'banner/list'
- })
- }
- //添加轮播图
- export function addBanner(params){
- return ajax({
- method:'POST',
- url:'banner/add',
- data:params
- })
- }
复制代码 创建轮播图页面
- <!--BannerListView.vue-->
- <template>
- <div>
- <el-table :data="bannerList" >
- <el-table-column type="index"></el-table-column>
- <el-table-column prop="img" label="图片">
- <template #default="scope">
- <div style="display: flex;align-items: center;">
- <el-image :src="scope.row.img"></el-image>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="alt" label="提示信息"></el-table-column>
- <el-table-column prop="link" label="链接"></el-table-column>
- </el-table>
- </div>
-
- </template>
- <script>
- import { bannerList } from '@/api/banner';
- export default{
- data(){
- return {
- bannerList:[]
- }
- },
- mounted(){
- bannerList().then(res=>{
- this.bannerList=res.data
- })
- }
- }
- </script>
- <style lang="scss" scoped>
- .el-image{
- width: 80px;
- }
- </style>
复制代码 添加轮播图
图表管理echarts
官网:Apache ECharts
安装echarts
导入图表
将图表绑定在指定元素上
设置一个option
- <template>
- <div>
- <el-button @click="changeType('line')">折线图</el-button>
- <el-button @click="changeType('bar')" type="primary">柱状图</el-button>
- <el-button @click="changeType('pie')" type="success">饼图</el-button>
- <el-button @click="changeType('scatter')" type="info">散点图</el-button>
- <el-button @click="changeType('line',['冰箱','空调','电视机','电磁炉'],['100','180','200','160'])" type="warning">电器销量</el-button>
- <el-button @click="changeType('bar',['草莓','香蕉','西瓜','樱桃','甘蔗','橘子','橙子'],['200','111','222','333','210','123','20'])" type="danger">水果销量</el-button>
- </div>
- <div id="main">
- </div>
- </template>
- <script>
- import * as echarts from 'echarts';
- export default{
- data(){
- return {
- mychart: null
- }
- },
- methods:{
- changeType(type,x,y){
- // 绘制图表
- this.myChart.setOption({
- title: {
- text: 'ECharts 入门示例'
- },
- tooltip: {},
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- xAxis: {
- data: x || ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
- },
- yAxis: {},
- series: [
- {
- name: '销量',
- type: type||'bar',
- data: y || [5, 20, 36, 10, 10, 20]
- }
- ]
- });
- }
- },
- mounted(){
- // 基于准备好的dom,初始化echarts实例
- this.myChart = echarts.init(document.getElementById('main'));
- this.changeType('bar')
- }
- }
- </script>
- <style lang="scss" scoped>
- #main{
- height: 600px;
- background-color: white;
- }
- </style>
复制代码 文件导入 excel
安装
选择文件
将文件读成数据流
将数据流读为对象
将对象中的工作表内容读取出来
将读取的内容转为json
数据渲染
- <template>
- <div>
- <el-button type="success" @click="importClick">选择文件</el-button>
- <input ref="inp" hidden type="file" @change="importChange"/>
- <el-table :data="computedTableData" >
- <el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
- <el-table-column prop="nickname" label="昵称"></el-table-column>
- <el-table-column label="性别">
- <template #default="scope">
- <span>{
-
- { scope.row.sex == -1?'女':'男' }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="tel" label="联系电话"></el-table-column>
- </el-table>
- <!-- 分页显示 -->
- <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="userList.length" />
- </div>
- </template>
- <script>
- import * as XLSX from 'xlsx'
- export default{
- data(){
- return {
- userList:[],
- currentPage: 1
- }
- },
- methods:{
- importClick(){
- //选择文件按钮的点击事件
- this.$refs.inp.click()
- },
- importChange(event){
- //选中文件后的回调函数
- //console.log(event.target.files[0])
- //获取选中的文件
- const file = event.target.files[0];
- //创建文件的加载器
- const reader = new FileReader();
- //将文件读取成数据流
- reader.readAsBinaryString(file);
- reader.onload = () => {
- //将文件转换成js对象
- const boxx = XLSX.read(reader.result,{type:'binary'})
- //将工作表1中的数据提取出来
- let res = boxx.Sheets['工作表1'];
- //将工作表1中的数据转换成json
- res = XLSX.utils.sheet_to_json(res);
- this.userList = res;
- }
- }
- },
- mounted(){
- },
- computed:{
- //计算当前页显示的数据
- computedTableData(){
- return this.userList.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
- }
- }
- }
- </script>
复制代码 文件导出 excel
利用文档:js-export-excel - npm
安装
- npm install js-export-excel
复制代码 1、导入利用函数
2、创建导出对象
3、界说导出内容
4、实现具体导出
- <template>
- <div>
- <!-- 文件导出有两种方式:
- 1)直接使用a标签 -->
- <!-- <a href="https://code.jquery.com/jquery-3.6.2.min.js" download=""></a> -->
- <!-- 2)自己将数据处理后本地保存 -->
- <el-button @click="exportClick">文件导出</el-button>
- <el-table :data="computedTableData" >
- <el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
- <el-table-column prop="nickname" label="昵称"></el-table-column>
- <el-table-column label="性别">
- <template #default="scope">
- <span>{
-
- { scope.row.sex == -1?'女':'男' }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="tel" label="联系电话"></el-table-column>
- </el-table>
- <!-- 分页显示 -->
- <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="userList.length" />
- </div>
- </template>
- <script>
- import { userList } from '@/api/user';
- //1、导入使用函数
- import ExportJsonExcel from 'js-export-excel';
- export default{
- data(){
- return {
- userList:[],
- currentPage: 1
- }
- },
- mounted(){
- userList().then(res=>{
- this.userList = res.data;
- })
- },
- methods:{
- exportClick(){
- //2、创建导出对象
- let option= {}
- //导出文件名字
- option.fileName = 'userList'
- //导出内容
- option.datas = [
- {
- //需要导出的数据
- sheetData:this.userList,
- //工作表名称
- sheetName: "工作表1",
- sheetFilter: ["nickname", "sex", "tel"],
- sheetHeader: ["昵称", "性别", "联系电话"],
- columnWidths: [20, 20],
- }
- ];
-
- //实现具体导出
- var toExcel = new ExportJsonExcel(option); //new
- toExcel.saveExcel(); //保存
- }
- },
- computed:{
- //计算当前页显示的数据
- computedTableData(){
- return this.userList.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
- }
- }
- }
- </script>
复制代码 富文本编辑器
官方文档:TinyMCE 7 Documentation | TinyMCE Documentation
安装:
- npm install @tinymce/tinymce-vue tinymce
- 或npm install --save tinymce "@tinymce/tinymce-vue@^5"
复制代码 利用,需要申请api-key
- <template>
- <div>
- <Editor></Editor>
- </div>
- </template>
- <script>
- import Editor from '@tinymce/tinymce-vue'
- export default{
- data(){
- return {
- }
- },
- mounted(){
-
- },
- components:{
- Editor,
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |