一、Vue树形表格example.gif

官方文档

安装依赖

  1. yarn add vue-table-with-tree-grid
  1. npm i vue-table-with-tree-grid -S

使用

  1. import Vue from 'vue'
  2. import ZkTable from 'vue-table-with-tree-grid'
  4. Vue.use(ZkTable)

Or

  1. import Vue from 'vue'
  2. import ZkTable from 'vue-table-with-tree-grid'
  4. Vue.component(ZkTable.name, ZkTable)

示例：

  1. import TrreTable from 'vue-table-with-tree-grid'
  3. Vue.component('tree-table',TrreTable)

二、富文本编辑器

官方文档

安装

  1. yarn add vue-quill-editor

引入注册

  1. import Vue from 'vue'
  2. import VueQuillEditor from 'vue-quill-editor'
  4. // require styles
  5. import 'quill/dist/quill.core.css'
  6. import 'quill/dist/quill.snow.css'
  7. import 'quill/dist/quill.bubble.css'
  9. Vue.use(VueQuillEditor, /* { default global options } */)

客户端使用

  1. <template>
  2.   <!-- bidirectional data binding（双向数据绑定） -->
  3.   <quill-editor v-model="content"
  4.                 ref="myQuillEditor"
  5.                 :options="editorOption"
  6.                 @blur="onEditorBlur($event)"
  7.                 @focus="onEditorFocus($event)"
  8.                 @ready="onEditorReady($event)">
  9.   </quill-editor>
  11.   <!-- Or manually control the data synchronization（或手动控制数据流） -->
  12.   <quill-editor :content="content"
  13.                 :options="editorOption"
  14.                 @change="onEditorChange($event)">
  15.   </quill-editor>
  16. </template>
  18. <script>
  20.   // you can also register quill modules in the component
  21.   import Quill from 'quill'
  22.   import { someModule } from '../yourModulePath/someQuillModule.js'
  23.   Quill.register('modules/someModule', someModule)
  25.   export default {
  26.     data () {
  27.       return {
  28.         content: '<h2>I am Example</h2>',
  29.         editorOption: {
  30.           // some quill options
  31.         }
  32.       }
  33.     },
  34.     // manually control the data synchronization
  35.     // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
  36.     methods: {
  37.       onEditorBlur(quill) {
  38.         console.log('editor blur!', quill)
  39.       },
  40.       onEditorFocus(quill) {
  41.         console.log('editor focus!', quill)
  42.       },
  43.       onEditorReady(quill) {
  44.         console.log('editor ready!', quill)
  45.       },
  46.       onEditorChange({ quill, html, text }) {
  47.         console.log('editor change!', quill, html, text)
  48.         this.content = html
  49.       }
  50.     },
  51.     computed: {
  52.       editor() {
  53.         return this.$refs.myQuillEditor.quill
  54.       }
  55.     },
  56.     mounted() {
  57.       console.log('this is current quill instance object', this.editor)
  58.     }
  59.   }
  60. </script>

四、Echarts

官方文档

安装

  1. yarn add echarts

导入

局部组件

  1. import echarts from "echarts";
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 600px;height:400px;"></div>
  12.     <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14.         var myChart = echarts.init(document.getElementById('main'));
  16.         // 指定图表的配置项和数据
  17.         var option = {
  18.             title: {
  19.                 text: 'ECharts 入门示例'
  20.             },
  21.             tooltip: {},
  22.             legend: {
  23.                 data:['销量']
  24.             },
  25.             xAxis: {
  26.                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  27.             },
  28.             yAxis: {},
  29.             series: [{
  30.                 name: '销量',
  31.                 type: 'bar',
  32.                 data: [5, 20, 36, 10, 10, 20]
  33.             }]
  34.         };
  36.         // 使用刚指定的配置项和数据显示图表。
  37.         myChart.setOption(option);
  38.     </script>
  39. </body>
  40. </html>

五、nprogress进度条

官方文档

安装

  1. yarn add nprogress

使用

在main.js文件中

  1. //导入NProgress包对应的JS和css
  2. import NProgress from 'nprogress'
  3. import 'nprogress/nprogress.css'
  4. /* 配置请求的根路径 */
  5. axios.defaults.baseURL = 'http://192.168.14.42:8888/api/private/v1/'
  6. //在request拦截器中,展示进度条  NProgress.start()
  7. axios.interceptors.request.use(config=>{
  8.     NProgress.start()
  9.     config.headers.Authorization = window.sessionStorage.getItem('token')
  10.     return config
  11. })
  12. //在response拦截器中,隐藏进度条 NProgress.done()
  13. axios.interceptors.response.use(config=>{
  14.     NProgress.done()
  15.     return config
  16. })
  17. Vue.prototype.axios = axios

六、select选择器

选择器详解

6-1 常规选择

绑定ID，根据类名获取

  1. <el-form-item label="所属医院">
  2.   <el-select v-model="dataForm.hospitalId" clearable>
  3.     <el-option
  4.       v-for="item in hospitalList"
  5.       :key="item.id"
  6.       :label="item.hospitalName"
  7.       :value="item.id"
  8.     ></el-option>
  9.   </el-select>
  10. </el-form-item>

image.png

6-2 获取label属性

  1. categoryList:[
  2.     {
  3.     categoryName:"***",
  4.     categoryId:123456
  5.   }
  6. ]

image.png
image.png

6-3 选择器带分页

参考文档
image.png image.png

6-3-1 组件封装

  1. <template>
  2.   <el-row>
  3.     <el-col>
  4.       <el-select
  5.         v-model="copyValue"
  6.         filterable
  7.         clearable
  8.         :placeholder="place"
  9.         @change="updateValue"
  10.       >
  11.         <el-option
  12.           v-for="item in dataList"
  13.           :key="item.value"
  14.           :label="item[labelKey]"
  15.           :value="item[valueKey]"
  16.         >
  17.         </el-option>
  18.         <el-col>
  19.           <div style="float: right; ">
  20.             <el-pagination
  21.               @current-change="handleCurrentChange"
  22.               :current-page="pageInfo.page"
  23.               :page-size="pageInfo.limit"
  24.               layout="total, prev, pager, next"
  25.               :total="pageInfo.total"
  26.             >
  27.             </el-pagination>
  28.           </div>
  29.         </el-col>
  30.       </el-select>
  31.     </el-col>
  32.   </el-row>
  33. </template>
  35. <script>
  36. export default {
  37.   name: "NewPageSelect",
  38.   props: {
  39.     //绑定值
  40.     value: String,
  41.     //下拉列表
  42.     dataList: Array,
  43.     //option的label在列表中对应的key
  44.     labelKey: String,
  45.     //option的value在列表中对应的key
  46.     valueKey: String,
  47.     //分页信息
  48.     pageInfo: Object,
  49.     place: String,
  50.   },
  51.   watch: {
  52.     value: {
  53.       handler: function (val) {
  54.         this.copyValue = val;
  55.       },
  56.       deep: true,
  57.     },
  58.   },
  59.   methods: {
  60.     //更新值
  61.     updateValue() {
  62.       this.$emit("update:value", this.copyValue);
  63.     },
  64.     //翻页
  65.     handleCurrentChange(val) {
  66.       this.$emit("selectPageChange", val);
  67.     },
  68.   },
  69.   data() {
  70.     return {
  71.       copyValue: this.value,
  72.     };
  73.   },
  74. };
  75. </script>
  77. <style scoped>
  78. </style>

6-3-2 父组件中使用

  1. <newPageSelect
  2.   class="filter-item"
  3.   style="width: 150px; margin-right: 20px"
  4.   :value.sync="listQuery.userId"
  5.   @selectPageChange="brandUserListSearch"
  6.   :valueKey="'id'"
  7.   :labelKey="'nickname'"
  8.   :pageInfo="brandUserInfo"
  9.   :dataList="brandUserList"
  10.   :place="'品牌商'"
  11. >
  12. </newPageSelect>
  15. import NewPageSelect from "@/components/NewPageSelect";
  17. data(){
  18.     return{
  19.        brandUserInfo: {
  20.         page: 1,
  21.         limit: 5,
  22.         total: 0,
  23.         userIdentity: 1,
  24.       },
  25.      copyValue: this.value,
  26.      brandUserList: [],
  27.   }
  28. }
  30. props: {
  31.   value: String,
  32. },
  34.  watch: {
  35.   //监听copyValue值变化
  36.   copyValue: {
  37.     handler(newV, oldV) {
  38.       this.$emit("update:value", this.copyValue);
  39.     },
  40.     deep: true,
  41.   },
  42. },
  44. created() {
  45.   this.getList();
  46.   this.brandUserListSearch();
  47. },
  49. //父实例查询
  50. brandUserListSearch(val) {
  51.   userList(this.brandUserInfo).then((res) => {
  52.     this.brandUserList = res.data.data.list;
  53.     this.brandUserInfo.total = parseInt(res.data.data.total);
  54.   });
  55.   this.brandUserInfo.page = val;
  56. },

七、区域选择器

  1. <el-cascader
  2.   ref="loactionCascaderRef"
  3.   v-model="filter.location_code"
  4.   :placeholder="$t('userlist.region')"
  5.   :options="regions"
  6.   clearable
  7.   :props="{ checkStrictly: true }"
  8.   @change="getUserList(true)"
  9.  />

1、watch监听

  1. watch: {
  2.     filterLocation(nV, oV) {
  3.       if (this.$refs.loactionCascaderRef) {
  4.         this.$refs.loactionCascaderRef.dropDownVisible = false
  5.       }
  6.     }
  7.   },

2、引入regions

  1. import regions from '@/mixins/regions'
  2. mixins: [regions],

3.封装调用

1.api/common.js

  1. import request from '@/utils/request'
  2. export function regions() {
  3.   return request({
  4.     url: '/mock/constant/regions',
  5.     method: 'get'
  6.   })
  7. }

2.store/modules/common.js

  1. import { regions } from '@/api/common'
  3. const common = {
  4.   state: {
  5.     regions: []
  6.   },
  7.   mutations: {
  8.     SET_REGIONS: (state, regions) => {
  9.       state.regions = regions
  10.     }
  11.   },
  12.   actions: {
  13.     GetRegions({ commit }) {
  14.       return new Promise((resolve, reject) => {
  15.         regions()
  16.           .then(res => {
  17.             const regions = res.data
  18.             commit('SET_REGIONS', regions)
  19.             resolve(regions)
  20.           })
  21.           .catch(err => {
  22.             reject(err)
  23.           })
  24.       })
  25.     }
  26.   }
  27. }
  29. export default common

3.store/getters.js

  1. const getters = {
  2.   sidebar: state => state.app.sidebar,
  3.   language: state => state.app.language,
  4.   size: state => state.app.size,
  5.   device: state => state.app.device,
  6.   visitedViews: state => state.tagsView.visitedViews,
  7.   cachedViews: state => state.tagsView.cachedViews,
  8.   token: state => state.user.token,
  9.   avatar: state => state.user.avatar,
  10.   name: state => state.user.name,
  11.   introduction: state => state.user.introduction,
  12.   status: state => state.user.status,
  13.   roles: state => state.user.roles,
  14.   setting: state => state.user.setting,
  15.   permission_routes: state => state.permission.routes,
  16.   addRoutes: state => state.permission.addRoutes,
  17.   regions: state => state.common.regions
  18. }
  19. export default getters

4.store/index.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import app from './modules/app'
  4. import permission from './modules/permission'
  5. import tagsView from './modules/tagsView'
  6. import user from './modules/user'
  7. import common from './modules/common'
  8. import getters from './getters'
  10. Vue.use(Vuex)
  12. const store = new Vuex.Store({
  13.   modules: {
  14.     app,
  15.     permission,
  16.     tagsView,
  17.     user,
  18.     common
  19.   },
  20.   getters
  21. })
  23. export default store

5.mixins/regions.js

  1. export default {
  2.   data() {
  3.     return {
  4.       regions: []
  5.     }
  6.   },
  7.   created() {
  8.     const regions = this.$store.getters.regions
  9.     if (regions && regions.length) {
  10.       this.regions = regions
  11.     } else {
  12.       this.$store
  13.         .dispatch('GetRegions')
  14.         .then(res => {
  15.           this.regions = res
  16.         })
  17.         .catch(err => {
  18.           console.log(err)
  19.         })
  20.     }
  21.   }
  22. }

4.效果

image.png

八、侧边栏得自定义修改

image.png

结构层

  1. <el-scrollbar wrap-class="scrollbar-wrapper">
  2.   <div class="logo">
  3.     <img class="logo_img" src="../../../../../images/便医精查logo.png" alt />
  4.     <div>便医精查</div>
  5.   </div>
  7.   <el-menu
  8.     :show-timeout="200"
  9.     :default-active="$route.path"
  10.     :collapse="isCollapse"
  11.     mode="vertical"
  12.     class="el-menu-vertical-demo"
  13.   >
  14.     <sidebar-item
  15.       v-for="route in permission_routers"
  16.       :key="route.path"
  17.       :item="route"
  18.       :base-path="route.path"
  19.     />
  20.   </el-menu>
  21. </el-scrollbar>

样式层

  1. .logo {
  2.   text-align: center;
  3.   margin: 50px 0;
  4.   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  5.   font-weight: bolder;
  6. }
  7. .logo_img {
  8.   width: 50px;
  9.   height: 50px;
  10.   margin-bottom: 10px;
  11. }
  12. .el-menu {
  13.   background-color: #f1f1f6;
  14.   text-align: center;
  15. }
  16. .el-menu-item.is-active {
  17.   color: #fff !important;
  18.   background-color: #7e7eff !important;
  19. }
  20. .el-menu-item {
  21.   background-color: #f1f1f6;
  22.   color: #49497e;
  23.   height: 40px;
  24.   line-height: 40px;
  25.   margin-bottom: 20px;
  26.   width: 170px;
  27.   border-radius: 4px;
  28.   font-size: 16px;
  29.   margin: 10px auto;
  30. }
  31. #app .sidebar-container .submenu-title-noDropdown:hover,
  32. #app .sidebar-container .el-submenu__title:hover {
  33.   background-color: #7e7eff !important;
  34.   color: #fff !important;
  35. }
  36. #app .sidebar-container {
  37.   font-size: 18px;
  38. }
  39. #app .sidebar-container .is-active > .el-submenu__title {
  40.   color: #7e7eff !important;
  41. }
  42. #app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
  43. #app .sidebar-container .el-submenu .el-menu-item {
  44.   background-color: #f1f1f6 !important;
  45.   height: 40px;
  46.   line-height: 40px;
  47.   margin-bottom: 20px;
  48.   width: 170px;
  49.   border-radius: 4px;
  50.   font-size: 16px;
  51.   margin: 10px auto;
  52. }
  54. #app .sidebar-container .el-submenu .is-active {
  55.   color: #fff !important;
  56.   background-color: #7e7eff !important;
  57. }
  58. .el-submenu__title {
  59.   border-radius: 4px;
  60.   height: 40px;
  61.   line-height: 40px;
  62.   width: 170px;
  63.   font-size: 16px;
  64.   color: #49497e;
  65.   margin: 10px auto;
  66.   padding: 0 20px;
  67.   list-style: none;
  68.   cursor: pointer;
  69.   position: relative;
  70.   -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  71.   transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  72.   -webkit-box-sizing: border-box;
  73.   box-sizing: border-box;
  74.   white-space: nowrap;
  75. }
  76. #app .sidebar-container .el-submenu .el-menu-item:hover {
  77.   background-color: #7e7eff !important;
  78.   color: #fff !important;
  79. }

效果图

image.png

九、table表格中放大图片

9-1 单张图片

  1.  <el-table-column align="center" property="backCardImg" label="身份证反面照">
  2.   <template slot-scope="scope">
  3.     <el-popover placement="bottom" trigger="click">
  4.       <!--trigger属性值：hover、click、focus 和 manual-->
  5.       <a :href="scope.row.backCardImg" target="_blank" title="查看最大化图片">
  6.         <img :src="scope.row.backCardImg" style="width: 560px;height: 560px" />
  7.       </a>
  8.       <img
  9.         slot="reference"
  10.         :src="scope.row.backCardImg"
  11.         style="width: 80px;height: 80px; cursor:pointer"
  12.       />
  13.     </el-popover>
  14.   </template>
  15. </el-table-column>

9-2 多张图片

  1.  <el-table-column label="小票图片" align="center">
  2.   <template slot-scope="scope">
  3.     <span v-for="(item,index) in scope.row.smallTicketImg" :key="index">
  4.       <el-popover placement="left" trigger="click" width="500">
  5.         <img :src="item" width="100%" />
  6.         <img
  7.           slot="reference"
  8.           :src="item"
  9.           :alt="item"
  10.           style="max-height: 80px;max-width: 80px; padding: 3px"
  11.         />
  12.       </el-popover>
  13.     </span>
  14.   </template>
  15. </el-table-column>

十、关于时间选择器

官网

10-1 日期格式

使用format指定输入框的格式；使用value-format指定绑定值的格式。

  1. <el-form-item label="开始时间" prop="startTime">
  2.   <el-date-picker
  3.     v-model="dataForm.startTime"
  4.     value-format="yyyy-MM-dd hh:mm:ss"
  5.     type="datetime"
  6.     placeholder="选择日期时间"
  7.   ></el-date-picker>
  8. </el-form-item>