赞
踩
目录
3.6 安装vue-table-with-tree-grid运行依赖及应用
3.7 安装vue-quill-editor富文本编辑器 运行依赖及应用
当项目使用less样式时,需要安装开发依赖less-load和less
(1)less-load:开发依赖
(2)less:开发依赖
链接:https://pan.baidu.com/s/1CBZ4FsI74nOEzYPodP_7vA
提取码:9g1e
NProgress是页面跳转是出现在浏览器顶部的进度条
官网:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
(1)导入
- // 当如nprogress 包对应的js和css 用于加载进度条
- import NProgress from 'nprogress'
- import 'nprogress/nprogress.css'
(2)在axios请求和响应中调用
- // 给请求头添加Authorization
- axios.interceptors.request.use(config => {
- // 展示进度条
- NProgress.start()
- config.headers.Authorization = window.sessionStorage.getItem('token')
- return config
- })
-
- // 在response拦截器中,隐藏进度条
- axios.interceptors.response.use(config => {
- NProgress.done()
- return config
- })
- import TreeTable from 'vue-table-with-tree-grid'
-
- Vue.component('tree-table', TreeTable)
<!-- 表格 -->
<tree-table
class="treeTable"
:data="cateList"
:columns="columns"
:expand-type="false"
:selection-type="false"
show-index
index-text="#"
border
>
<!-- 是否卓有成效 -->
<template slot="isOk" slot-scope="scope">
<i
class="el-icon-success"
style="color: lightgreen;"
v-if="scope.row.cat_deleted === false"
></i>
<i class="el-icon-error" style="color: red;" v-else></i>
</template>
<!-- 排序 -->
<template slot="order" slot-scope="scope">
<el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
<el-tag type="success" v-else-if="scope.row.cat_level === 1" size="mini">二级</el-tag>
<el-tag type="warning" v-else size="mini">三级</el-tag>
</template>
<!-- 操作 -->
<template slot="opt" slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="showEditDialog(scope.row)"
>编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="delCate(scope.row)">删除</el-button>
</template>
</tree-table>
- // 导入富文本编辑器
- import VueQuillEditor from 'vue-quill-editor'
-
- // require styles 导入富文本编辑器的样式文件
- import 'quill/dist/quill.core.css'
- import 'quill/dist/quill.snow.css'
- import 'quill/dist/quill.bubble.css'
-
- // 注册富文本编辑器
- Vue.use(VueQuillEditor)
<quill-editor v-model="addForm.goods_introduce"></quill-editor>
https://www.jianshu.com/p/907e8a0ee5d7
- <script>
- import _ from 'lodash'
- ...
- ...
- </script>
- 深拷贝
- const form = _.cloneDeep(this.addForm)
官方文档 https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。