组件文档

2022-12-16 10:10:18 +08:00
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'eslint:recommended',
+    'plugin:prettier/recommended'
+  ],
+  parserOptions: {
+    parser: '@babel/eslint-parser'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none"
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
+# code-brick-wd
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset']
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "code-brick-wd",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "code-brick-zj": "^0.0.1",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.12",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^2.4.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "vue-template-compiler": "^2.6.14"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,15 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,12 @@
+<template>
+  <section>
+    <keep-alive>
+      <router-view />
+    </keep-alive>
+  </section>
+</template>
+<script>
+export default {
+  name: 'AppMain'
+}
+</script>
--- a/src/layout/components/MenuList.vue
+++ b/src/layout/components/MenuList.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-aside
+    v-if="leftMenuList.length > 0 ? true : false"
+    :width="variables.menuWidth"
+    class="menuBox"
+  >
+    <el-tabs
+      v-model="activeMenu"
+      tab-position="left"
+      class="menuContainer"
+      @tab-click="toggleMenu"
+    >
+      <el-tab-pane
+        v-for="(item, i) in leftMenuList"
+        :key="i"
+        :label="item.meta.title"
+        :name="item.name"
+      ></el-tab-pane>
+    </el-tabs>
+  </el-aside>
+</template>
+<script>
+import variables from '@/styles/variables.module.scss'
+export default {
+  name: 'MenuList',
+  data() {
+    return {}
+  },
+  computed: {
+    variables() {
+      return variables
+    },
+    leftMenuList() {
+      return this.$store.state.menu.leftMenuList
+    },
+    activeMenu: {
+      get: function () {
+        return this.$store.getters.activeMenu
+      },
+      set: function () {}
+    }
+  },
+  mounted() {},
+  methods: {
+    toggleMenu(e) {
+      this.$store.dispatch('menu/setActiveMenu', e.name)
+      // this.$router.push({ name: e.name })
+    }
+  },
+  watch: {
+    activeMenu: function (newVal) {
+      this.$router.push({ name: newVal })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+.menuBox {
+  background-color: $color-white;
+  .menuContainer {
+    height: calc(100vh - #{$navbarHeight});
+    width: $menuWidth;
+  }
+}
+</style>
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="navbarContainer">
+    <div class="logoBox">
+      <img src="./../../assets/logo.png" alt="中建材" class="logoImg" />
+      <span class="title">组件使用</span>
+    </div>
+    <div class="fr">
+      <el-tabs
+        v-model="activeModule"
+        @tab-click="toggleModule"
+        class="topMenuBox fr"
+      >
+        <el-tab-pane
+          v-for="(item, i) in topModuleList"
+          :key="i"
+          :label="item.label"
+          :name="item.name"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'NavbarPage',
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['topModuleList']),
+    activeModule: {
+      get: function () {
+        return this.$store.getters.activeModule
+      },
+      set: function () {}
+    }
+  },
+  mounted() {
+    this.$store.dispatch('menu/getTopModuleList')
+  },
+  methods: {
+    toggleModule(e) {
+      if (e.name === 'home') {
+        this.$router.push({ path: '/home/index' })
+      }
+      // 加载左侧菜单并跳转第一个菜单的页面
+      const activeBox = { activeModule: e.name, activeMenu: '' }
+      this.$store.dispatch('menu/setActiveModule', activeBox)
+    },
+    logout() {
+      this.$router.push({ path: '/login' })
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '@/styles/variables.module.scss';
+.navbarContainer {
+  .logoBox {
+    float: left;
+    .logoImg {
+      height: 38px;
+      width: 38px;
+      vertical-align: middle;
+      margin-right: 20px;
+    }
+    .title {
+      font-size: 18px;
+      font-weight: 700;
+    }
+  }
+  .el-dropdown-link {
+    margin-left: 20px;
+  }
+  .topMenuBox {
+    margin-right: 20px;
+    .el-tabs__item {
+      font-size: 20px;
+      font-weight: 700;
+    }
+    .el-tabs__nav-wrap::after {
+      width: 0;
+    }
+    .el-tabs__active-bar {
+      height: 0;
+    }
+  }
+}
+</style>
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
@@ -0,0 +1,3 @@
+export { default as AppMain } from './AppMain'
+export { default as MenuList } from './MenuList'
+export { default as Navbar } from './Navbar'
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-container class="itemContainer">
+    <el-header>
+      <navbar />
+    </el-header>
+    <el-container class="sectionBox">
+      <menu-list />
+      <el-container>
+        <div class="app-container">
+          <app-main />
+        </div>
+        <el-footer height="38px">
+          <div class="footerFont">©中建材智能自动化研究院有限公司</div>
+        </el-footer>
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+<script>
+import { AppMain } from './components'
+import MenuList from './components/MenuList'
+import Navbar from './components/Navbar'
+export default {
+  name: 'LayoutPage',
+  data() {
+    return {}
+  },
+  components: { AppMain, MenuList, Navbar }
+}
+</script>
+<style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+.itemContainer {
+  min-width: 1500px;
+}
+.el-header {
+  background-color: $color-primary-light-8;
+  line-height: $navbarHeight;
+}
+.el-footer {
+  text-align: center;
+}
+.sectionBox {
+  height: calc(100vh - #{$navbarHeight});
+  background-color: $background-color-secondary;
+  .app-container {
+    height: calc(100vh - #{$navbarHeight} - #{$footerHeight} - 10px);
+    margin: 10px 10px 0;
+    padding: 20px;
+    background-color: $color-white;
+    overflow: auto;
+  }
+  .footerFont {
+    font-size: 14px;
+    line-height: $footerHeight;
+    color: $color-text-secondary;
+  }
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import myComponents from 'code-brick-zj'
+import '../theme/index.css' // 自定义主题包
+import '@/styles/index.scss' // global css
+Vue.use(ElementUI)
+
+Vue.config.productionTip = false
+Vue.use(myComponents)
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App)
+}).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,139 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import store from '@/store'
+
+Vue.use(VueRouter)
+
+const originalPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch((err) => err)
+}
+
+import Layout from '@/layout'
+
+/**
+ * hidden: true       if set true, item will not show in the top menuModule(default is false)
+ */
+
+export const routes = [
+  {
+    path: '/home',
+    component: Layout,
+    name: 'home',
+    meta: {
+      title: '首页'
+    },
+    children: [
+      {
+        path: 'introduce',
+        name: 'introduce',
+        meta: {
+          title: '介绍'
+        },
+        component: () => import('../views/home/introduce')
+      }
+    ]
+  },
+  {
+    path: '/table',
+    component: Layout,
+    name: 'table',
+    meta: {
+      title: '表格'
+    },
+    children: [
+      {
+        path: 'singleHead',
+        name: 'singleHead',
+        meta: {
+          title: '单表头'
+        },
+        component: () => import('../views/table/singleHead')
+      },
+      {
+        path: 'multiLevelHead',
+        name: 'multiLevelHead',
+        meta: {
+          title: '多级表头'
+        },
+        component: () => import('../views/table/multiLevelHead')
+      },
+      {
+        path: 'canBeEntered',
+        name: 'canBeEntered',
+        meta: {
+          title: '可输入型'
+        },
+        component: () => import('../views/table/canBeEntered')
+      },
+      {
+        path: 'paginationShow',
+        name: 'paginationShow',
+        meta: {
+          title: '分页'
+        },
+        component: () => import('../views/table/pagination')
+      }
+    ]
+  },
+  {
+    path: '/searchBar',
+    component: Layout,
+    name: 'searchBar',
+    meta: {
+      title: '搜索'
+    },
+    children: [
+      {
+        path: 'searchBar',
+        name: 'searchBar',
+        meta: {
+          title: '搜索'
+        },
+        component: () => import('../views/searchBar/searchBar')
+      }
+    ]
+  },
+  {
+    path: '/dialog',
+    component: Layout,
+    name: 'dialog',
+    meta: {
+      title: '对话框'
+    },
+    children: [
+      {
+        path: 'dialogPage',
+        name: 'dialogPage',
+        meta: {
+          title: '对话框'
+        },
+        component: () => import('../views/dialog/dialogPage')
+      }
+    ]
+  },
+  { path: '*', redirect: '/home/introduce', hidden: true }
+]
+
+const router = new VueRouter({
+  mode: 'hash',
+  base: process.env.BASE_URL,
+  routes
+})
+
+router.beforeEach((to, from, next) => {
+  if (to.path === '/login') {
+    next()
+  } else {
+    if (to.matched[0]) {
+      const activeBox = {
+        activeModule: to.matched[0].name,
+        activeMenu: to.matched[1].name
+      }
+      store.dispatch('menu/setActiveModule', activeBox)
+      next()
+    }
+  }
+})
+
+export default router
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -0,0 +1,7 @@
+const getters = {
+  topModuleList: (state) => state.menu.topModuleList,
+  leftMenuList: (state) => state.menu.leftMenuList,
+  activeModule: (state) => state.menu.activeModule,
+  activeMenu: (state) => state.menu.activeMenu
+}
+export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+const modulesFiles = require.context('./modules', true, /\.js$/)
+
+// you do not need `import app from './modules/app'`
+// it will auto require all vuex module from modules file
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+  // set './app.js' => 'app'
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = modulesFiles(modulePath)
+  modules[moduleName] = value.default
+  return modules
+}, {})
+
+const store = new Vuex.Store({
+  modules,
+  getters
+})
+
+export default store
--- a/src/store/modules/menu.js
+++ b/src/store/modules/menu.js
@@ -0,0 +1,75 @@
+import { routes } from '@/router'
+const state = {
+  topModuleList: JSON.parse(sessionStorage.getItem('topModuleList')),
+  leftMenuList: JSON.parse(sessionStorage.getItem('leftMenuList')),
+  activeModule: sessionStorage.getItem('activeModule'), // 顶部菜单模块
+  activeMenu: sessionStorage.getItem('activeMenu') // 左侧菜单
+}
+
+const mutations = {
+  SET_TOPMODULE: (state, menuModule) => {
+    state.topModuleList = menuModule
+    sessionStorage.setItem('topModuleList', JSON.stringify(menuModule))
+  },
+  SET_LEFTMENU: (state, menu) => {
+    state.leftMenuList = menu
+    sessionStorage.setItem('leftMenuList', JSON.stringify(menu))
+  },
+  SET_ACTIVEMODULE: (state, activeModule) => {
+    state.activeModule = activeModule
+    sessionStorage.setItem('activeModule', activeModule)
+  },
+  SET_ACTIVEMENU: (state, activeMenu) => {
+    state.activeMenu = activeMenu || state.leftMenuList[0].name
+    sessionStorage.setItem('activeMenu', state.activeMenu)
+  }
+}
+
+const actions = {
+  // 获取顶部菜单模块
+  getTopModuleList({ commit }) {
+    let temp = []
+    routes &&
+      routes.map((item) => {
+        if (item.hidden) {
+          return true
+        }
+        let obj = {}
+        obj.name = item.name
+        obj.label = item.meta.title
+        temp.push(obj)
+      })
+    commit('SET_TOPMODULE', temp)
+  },
+  // 设置菜单模块
+  setActiveModule({ commit, dispatch }, activeBox) {
+    const { activeModule, activeMenu } = activeBox
+    if (activeModule === 'home') {
+      commit('SET_LEFTMENU', [])
+    } else {
+      dispatch('getLeftMenuList', activeModule)
+      dispatch('setActiveMenu', activeMenu)
+    }
+    commit('SET_ACTIVEMODULE', activeModule)
+  },
+  // 获取左侧菜单
+  getLeftMenuList({ commit }, menuName) {
+    let temp = []
+    for (let i = 0; i < routes.length; i++) {
+      if (menuName === routes[i].name) {
+        temp = routes[i].children
+      }
+    }
+    commit('SET_LEFTMENU', temp)
+  },
+  setActiveMenu({ commit }, activeMenu) {
+    commit('SET_ACTIVEMENU', activeMenu)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -0,0 +1,14 @@
+@import './variables.module.scss';
+.menuBox {
+  .el-tabs__header.is-left {
+    margin: 0;
+    width: $menuWidth;
+  }
+  .el-tabs--left .el-tabs__active-bar.is-left {
+    width: 5px;
+  }
+  .el-tabs--left .el-tabs__item.is-left {
+      text-align: left;
+      font-size: 16px;
+  }
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -0,0 +1,99 @@
+@import './variables.module.scss';
+@import './element-ui.scss';
+
+// css reset
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+#app {
+  height: 100%;
+  color: $color-text-primary;
+}
+
+ul,li {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+// global style
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+::-webkit-scrollbar-track-piece {
+  background-color:rgba(144,147,153,0);
+}
+::-webkit-scrollbar-corner {
+  background-color:rgba(144,147,153,0);
+}
+::-webkit-scrollbar-track {
+  width: 6px;
+  background: rgba(144,147,153,0);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(144,147,153,.5);
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+  transition: background-color .3s;
+  cursor: pointer;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144,147,153,.3);
+}
--- a/src/styles/variables.module.scss
+++ b/src/styles/variables.module.scss
@@ -0,0 +1,55 @@
+// color
+// Brand Color
+$color-primary: #0B58FF;
+// Functional Color
+$color-success: #34E88E;
+$color-warning: #FFBD02;
+$color-danger: #FF5454;
+$color-info: #909399;
+// Font Color
+$color-text-primary: #161616;
+$color-text-regular: #606266;
+$color-text-secondary: #909399;
+$color-text-placeholder: #C0C4CC;
+// Border Color
+$border-color-base: #DCDFE6;
+$border-color-light: #E4E7ED;
+$border-color-lighter: #EBEEF5;
+$border-color-extra-light: #F2F6FC;
+// Background Color
+$color-white: #FFFFFF;
+$color-black: #000000;
+$background-color-base: #F0F2F5;
+$background-color-secondary: #F2F4F9;
+
+// mix color-primary
+$color-primary-light-1: mix($color-white, $color-primary, 10%) !default;
+$color-primary-light-2: mix($color-white, $color-primary, 20%) !default;
+$color-primary-light-3: mix($color-white, $color-primary, 30%) !default;
+$color-primary-light-4: mix($color-white, $color-primary, 40%) !default;
+$color-primary-light-5: mix($color-white, $color-primary, 50%) !default;
+$color-primary-light-6: mix($color-white, $color-primary, 60%) !default;
+$color-primary-light-7: mix($color-white, $color-primary, 70%) !default;
+$color-primary-light-8: mix($color-white, $color-primary, 80%) !default;
+$color-primary-light-9: mix($color-white, $color-primary, 90%) !default;
+// mix color-success
+$color-success-light-1: mix($color-white, $color-success, 10%) !default;
+$color-success-light-2: mix($color-white, $color-success, 20%) !default;
+$color-success-light-3: mix($color-white, $color-success, 30%) !default;
+$color-success-light-4: mix($color-white, $color-success, 40%) !default;
+$color-success-light-5: mix($color-white, $color-success, 50%) !default;
+$color-success-light-6: mix($color-white, $color-success, 60%) !default;
+$color-success-light-7: mix($color-white, $color-success, 70%) !default;
+$color-success-light-8: mix($color-white, $color-success, 80%) !default;
+$color-success-light-9: mix($color-white, $color-success, 90%) !default;
+
+// size
+$navbarHeight: 60px; // 导航栏高度
+$menuWidth: 160px;
+$footerHeight: 38px;
+
+:export {
+  navbarHeight: $navbarHeight;
+  menuWidth: $menuWidth;
+  footerHeight: $footerHeight;
+}
--- a/src/views/dialog/components/demoSlot.vue
+++ b/src/views/dialog/components/demoSlot.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-form ref="form" label-width="80px" :model="form">
+    <el-form-item label="用户名" prop="userName">
+      <el-input v-model="form.userName"></el-input>
+    </el-form-item>
+    <el-form-item label="密码" prop="passWord">
+      <el-input v-model="form.passWord"></el-input>
+    </el-form-item>
+    <el-form-item label="姓名" prop="name">
+      <el-input v-model="form.name"></el-input>
+    </el-form-item>
+    <el-form-item label="所属产线" prop="productLine">
+      <el-select
+        v-model="form.productLine"
+        placeholder="所属产线"
+        style="width: 100%"
+      >
+        <el-option
+          v-for="item in lineList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="角色" prop="role">
+      <el-select v-model="form.role" placeholder="角色" style="width: 100%">
+        <el-option
+          v-for="item in roleList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+export default {
+  name: 'DemoSlot',
+  data() {
+    return {
+      form: {
+        userName: '',
+        passWord: '123456',
+        name: '',
+        productLine: '',
+        role: ''
+      },
+      lineList: [],
+      roleList: []
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      console.log('init')
+      let _this = this
+      setTimeout(function () {
+        _this.lineList = [
+          { id: '1', name: '产线1' },
+          { id: '2', name: '产线2' }
+        ]
+      }, 1000)
+      setTimeout(function () {
+        _this.roleList = [
+          { id: '1', name: '加工人员' },
+          { id: '2', name: '管理人员' },
+          { id: '3', name: '数据录入人员' }
+        ]
+      }, 1000)
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>
+<style scoped>
+.el-form-item:last-child {
+  margin-bottom: 0px;
+}
+</style>
--- a/src/views/dialog/dialogPage.vue
+++ b/src/views/dialog/dialogPage.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="dialog-page">
+    <h2>有时候弹框较大，底部显示超过页面了。所以这边的对话框都是可拖拽的</h2>
+    <div class="demo-box">
+      <h3>基本用法-默认底部按钮是确定</h3>
+      <div>
+        <el-button @click="centervisible = true">点击打开dialog</el-button>
+        <BaseDialog
+          dialogTitle="新增"
+          :dialogVisible="centervisible"
+          :close-on-click-modal="false"
+          @cancel="handleCancel"
+          @confirm="handleConfirm"
+          :before-close="handleCancel"
+        >
+          <span
+            >基本用法-默认底部按钮是确定。不能通过点击 modal 关闭 Dialog</span
+          >
+        </BaseDialog>
+      </div>
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description">
+            修改弹框的标题为<code>dialogTitle</code>,为比必填。不传默认显示"请填入标题"
+          </div>
+          <div>
+            <pre>
+              &lt;el-button @click="centervisible = true"&gt;点击打开dialog&lt;/el-button&gt;
+              &lt;BaseDialog
+                dialogTitle="新增"
+                :dialogVisible="centervisible"
+                :close-on-click-modal="false"
+                @cancel="handleCancel"
+                @confirm="handleConfirm"
+                :before-close="handleCancel"
+              &gt;
+              &lt;span
+                &gt;基本用法-默认底部按钮是确定。不能通过点击 modal 关闭 Dialog&lt;/span
+                &gt;
+              &lt;/BaseDialog&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>修改底部按钮为保存</h3>
+      <div>
+        <el-button @click="centervisible1 = true">点击打开dialog</el-button>
+        <BaseDialog
+          dialogTitle="编辑"
+          :dialogVisible="centervisible1"
+          :before-close="handleCancel"
+        >
+          <span>修改底部按钮为保存</span>
+          <el-row slot="footer" type="flex" justify="end">
+            <el-col :span="12">
+              <el-button
+                size="small"
+                class="btnTextStyle"
+                @click="handleCancel1"
+                >取消</el-button
+              >
+              <el-button
+                type="primary"
+                size="small"
+                class="btnTextStyle"
+                @click="handleConfirm1"
+              >
+                保存
+              </el-button>
+            </el-col>
+          </el-row>
+        </BaseDialog>
+      </div>
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description">
+            ui设计的按钮文字间是有空格的，如果是自己写的footer，按钮文字可加样式<code>btnTextStyle</code>，用法见如下：
+          </div>
+          <div>
+            <pre>
+              &lt;el-button @click="centervisible1 = true"&gt;点击打开dialog&lt;/el-button&gt;
+              &lt;BaseDialog
+                dialogTitle="编辑"
+                :dialogVisible="centervisible1"
+                :before-close="handleCancel"
+                &gt;
+              &lt;span&gt;修改底部按钮为保存&lt;/span&gt;
+                &lt;el-row slot="footer" type="flex" justify="end"&gt;
+                  &lt;el-col :span="12"&gt;
+                    &lt;el-button size="small" class="btnTextStyle" @click="handleCancel1"&gt;取消&lt;/el-button&gt;
+                    &lt;el-button type="primary" size="small" class="btnTextStyle" @click="handleConfirm1"&gt;
+                      保存
+                    &lt;/el-button&gt;
+                  &lt;/el-col&gt;
+                &lt;/el-row&gt;
+              &lt;/BaseDialog&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>基本用法-示例</h3>
+      <div>
+        <el-button @click="centervisible2 = true">点击打开dialog</el-button>
+        <BaseDialog
+          dialogTitle="信息填写"
+          :dialogVisible="centervisible2"
+          @cancel="handleCancel2"
+          @confirm="handleConfirm2"
+          :before-close="handleCancel2"
+        >
+          <demoSlotVue ref="accountList" />
+        </BaseDialog>
+      </div>
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description">
+            <code>dialogbody</code
+            >的内容到<code>footer</code>的button的距离为40px
+          </div>
+          <div>
+            <pre>
+              &lt;el-button @click="centervisible = true"&gt;点击打开dialog&lt;/el-button&gt;
+              &lt;BaseDialog
+                dialogTitle="信息填写"
+                :dialogVisible="centervisible2"
+                @cancel="handleCancel2"
+                @confirm="handleConfirm2"
+                :before-close="handleCancel2"
+              &gt;
+              &lt;demoSlotVue ref="accountList" /&gt; // demoSlotVue是自己写的业务组件
+              &lt;/BaseDialog&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import demoSlotVue from './components/demoSlot.vue'
+export default {
+  name: 'dialogPage',
+  components: { demoSlotVue },
+  data() {
+    return {
+      centervisible: false,
+      centervisible1: false,
+      centervisible2: false
+    }
+  },
+  methods: {
+    handleCancel() {
+      this.centervisible = false
+    },
+    handleConfirm() {
+      alert('您点击了确定按钮')
+      this.centervisible = false
+    },
+    handleCancel1() {
+      this.centervisible1 = false
+    },
+    handleConfirm1() {
+      alert('您点击了保存按钮')
+      this.centervisible1 = false
+    },
+    handleCancel2() {
+      this.$refs.accountList.formClear()
+      this.centervisible2 = false
+    },
+    handleConfirm2() {
+      alert('您点击了确定按钮2')
+      this.centervisible2 = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dialog-page {
+  .demo-box {
+    margin-bottom: 40px;
+    .description code {
+      color: #5e6d82;
+      background-color: #e6effb;
+      margin: 0 4px;
+      display: inline-block;
+      padding: 1px 5px;
+      font-size: 12px;
+      border-radius: 3px;
+      height: 18px;
+      line-height: 18px;
+    }
+  }
+}
+</style>
--- a/src/views/home/introduce.vue
+++ b/src/views/home/introduce.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p>
+      组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
+    </p>
+    <p>文档当前使用的组件包的版本为：0.0.3</p>
+  </div>
+</template>
+<script>
+export default {
+  name: 'introducePage'
+}
+</script>
--- a/src/views/searchBar/searchBar.vue
+++ b/src/views/searchBar/searchBar.vue
--- a/src/views/table/canBeEntered.vue
+++ b/src/views/table/canBeEntered.vue
@@ -0,0 +1,362 @@
+<template>
+  <div>
+    <h2>可输入型</h2>
+    <div class="demo-box">
+      <h3>表格内嵌输入框</h3>
+      <base-table
+        border
+        :table-props="tableProps"
+        :table-data="tableData"
+        @emitFun="inputChange"
+      />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description">
+            在<code>tableProps</code>的<code>subcomponent</code>上渲染input组件.
+            @emitFun="inputChange"
+          </div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;base-table
+                  border
+                  :table-props="tableProps"
+                  :table-data="tableData"
+                  @emitFun="inputChange"
+                /&gt;
+              &lt;<span>/template</span>&gt;
+              &lt;script&gt;
+              const tableProps = [
+                {
+                  prop: 'testItems',
+                  label: '检验项目'
+                },
+                {
+                  prop: 'checkPoint',
+                  label: '检测点'
+                },
+                {
+                  prop: 'inspectionStandards',
+                  label: '检验标准'
+                },
+                {
+                  prop: 'measuredValue',
+                  label: '实测值',
+                  subcomponent: inputArea
+                },
+                {
+                  prop: 'samplingResults',
+                  label: '抽检结果',
+                  subcomponent: inputArea
+                },
+                {
+                  prop: 'remark',
+                  label: '备注',
+                  subcomponent: inputArea
+                }
+              ]
+              export default {
+                data() {
+                  return {
+                    tableProps,
+                    tableData: [
+                      {
+                        id: 1,
+                        testItems: '研磨幅',
+                        checkPoint: '左端点1',
+                        inspectionStandards: '0.1-0.4',
+                        measuredValue: '',
+                        samplingResults: '',
+                        remark: ''
+                      },
+                      {
+                        id: 2,
+                        testItems: '研磨幅',
+                        checkPoint: '左端点2',
+                        inspectionStandards: '0.1-0.4',
+                        measuredValue: '',
+                        samplingResults: '',
+                        remark: ''
+                      },
+                      {
+                        id: 3,
+                        testItems: '研磨幅',
+                        checkPoint: '右端点1',
+                        inspectionStandards: '0.1-0.4',
+                        measuredValue: '',
+                        samplingResults: '',
+                        remark: ''
+                      },
+                      {
+                        id: 4,
+                        testItems: '研磨幅',
+                        checkPoint: '右端点2',
+                        inspectionStandards: '0.1-0.4',
+                        measuredValue: '',
+                        samplingResults: '',
+                        remark: ''
+                      }
+                    ]
+                  }
+                }
+              }
+              &lt;/script&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>表格底部新增按钮</h3>
+      <base-table
+        border
+        :table-props="tableProps2"
+        :table-data="tableData2"
+        :add-button-show="addButtonShow"
+        @emitFun="inputChange2"
+        @emitButtonClick="emitButtonClick"
+      />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description">
+            在<code>tableProps</code>的<code>subcomponent</code>上渲染input组件
+            :add-button-show="addButtonShow" @emitFun="inputChange"
+            @emitButtonClick="emitButtonClick"
+          </div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;base-table
+                  border
+                  :table-props="tableProps"
+                  :table-data="tableData"
+                  @emitFun="inputChange"
+                /&gt;
+              &lt;<span>/template</span>&gt;
+              &lt;script&gt;
+              const tableProps = [
+                {
+                  prop: 'testItems',
+                  label: '检验项目',
+                  subcomponent: inputArea
+                },
+                {
+                  prop: 'checkPoint',
+                  label: '检测点',
+                  subcomponent: inputArea
+                },
+                {
+                  prop: 'inspectionStandards',
+                  label: '检验标准',
+                  subcomponent: inputArea
+                }
+              ]
+              export default {
+                data() {
+                  return {
+                    tableProps,
+                    tableData: [
+                      {
+                        id: 1,
+                        testItems: '研磨幅',
+                        checkPoint: '左端点1',
+                        inspectionStandards: '0.1-0.4'
+                      },
+                      {
+                        id: 2,
+                        testItems: '研磨幅',
+                        checkPoint: '左端点2',
+                        inspectionStandards: '0.1-0.4'
+                      },
+                      {
+                        id: 3,
+                        testItems: '研磨幅',
+                        checkPoint: '右端点1',
+                        inspectionStandards: '0.1-0.4'
+                      },
+                      {
+                        id: 4,
+                        testItems: '研磨幅',
+                        checkPoint: '右端点2',
+                        inspectionStandards: '0.1-0.4'
+                      }
+                    ],
+                    addButtonShow: '新增'
+                  }
+                },
+                methods: {
+                  inputChange(val) {
+                    console.log('=======')
+                    console.log(val)
+                    this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
+                    console.log(this.tableData)
+                  },
+                  inputChange2(val) {
+                    console.log('=======')
+                    console.log(val)
+                    this.tableData2[val._pageIndex - 1][val.prop] = val[val.prop]
+                    console.log(this.tableData2)
+                  },
+                  emitButtonClick() {
+                    console.log('emitButtonClick')
+                    let obj = {}
+                    for (let i of this.tableProps2) {
+                      obj[i.prop] = ''
+                    }
+                    this.tableData2.push(obj)
+                  }
+                }
+              }
+              &lt;/script&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import inputArea from './components/InputArea.vue'
+const tableProps = [
+  {
+    prop: 'testItems',
+    label: '检验项目'
+  },
+  {
+    prop: 'checkPoint',
+    label: '检测点'
+  },
+  {
+    prop: 'inspectionStandards',
+    label: '检验标准'
+  },
+  {
+    prop: 'measuredValue',
+    label: '实测值',
+    subcomponent: inputArea
+  },
+  {
+    prop: 'samplingResults',
+    label: '抽检结果',
+    subcomponent: inputArea
+  },
+  {
+    prop: 'remark',
+    label: '备注',
+    subcomponent: inputArea
+  }
+]
+const tableProps2 = [
+  {
+    prop: 'testItems',
+    label: '检验项目',
+    subcomponent: inputArea
+  },
+  {
+    prop: 'checkPoint',
+    label: '检测点',
+    subcomponent: inputArea
+  },
+  {
+    prop: 'inspectionStandards',
+    label: '检验标准',
+    subcomponent: inputArea
+  }
+]
+export default {
+  name: 'CanBeEntered',
+  data() {
+    return {
+      tableProps,
+      tableData: [
+        {
+          id: 1,
+          testItems: '研磨幅',
+          checkPoint: '左端点1',
+          inspectionStandards: '0.1-0.4',
+          measuredValue: '',
+          samplingResults: '',
+          remark: ''
+        },
+        {
+          id: 2,
+          testItems: '研磨幅',
+          checkPoint: '左端点2',
+          inspectionStandards: '0.1-0.4',
+          measuredValue: '',
+          samplingResults: '',
+          remark: ''
+        },
+        {
+          id: 3,
+          testItems: '研磨幅',
+          checkPoint: '右端点1',
+          inspectionStandards: '0.1-0.4',
+          measuredValue: '',
+          samplingResults: '',
+          remark: ''
+        },
+        {
+          id: 4,
+          testItems: '研磨幅',
+          checkPoint: '右端点2',
+          inspectionStandards: '0.1-0.4',
+          measuredValue: '',
+          samplingResults: '',
+          remark: ''
+        }
+      ],
+      tableProps2,
+      tableData2: [
+        {
+          id: 1,
+          testItems: '研磨幅',
+          checkPoint: '左端点1',
+          inspectionStandards: '0.1-0.4'
+        },
+        {
+          id: 2,
+          testItems: '研磨幅',
+          checkPoint: '左端点2',
+          inspectionStandards: '0.1-0.4'
+        },
+        {
+          id: 3,
+          testItems: '研磨幅',
+          checkPoint: '右端点1',
+          inspectionStandards: '0.1-0.4'
+        },
+        {
+          id: 4,
+          testItems: '研磨幅',
+          checkPoint: '右端点2',
+          inspectionStandards: '0.1-0.4'
+        }
+      ],
+      addButtonShow: '新增'
+    }
+  },
+  methods: {
+    inputChange(val) {
+      console.log('=======')
+      console.log(val)
+      this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
+      console.log(this.tableData)
+    },
+    inputChange2(val) {
+      console.log('=======')
+      console.log(val)
+      this.tableData2[val._pageIndex - 1][val.prop] = val[val.prop]
+      console.log(this.tableData2)
+    },
+    emitButtonClick() {
+      console.log('emitButtonClick')
+      let obj = {}
+      for (let i of this.tableProps2) {
+        obj[i.prop] = ''
+      }
+      this.tableData2.push(obj)
+    }
+  }
+}
+</script>
--- a/src/views/table/components/InnerTable.vue
+++ b/src/views/table/components/InnerTable.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-popover placement="right" width="400" trigger="click">
+    <el-table :data="tableData">
+      <el-table-column prop="date" label="日期" width="120"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="90"> </el-table-column>
+      <el-table-column prop="sex" label="性别"> </el-table-column>
+    </el-table>
+    <el-button
+      slot="reference"
+      type="text"
+      @click="showInnerTable(injectData.id)"
+      >记录</el-button
+    >
+  </el-popover>
+</template>
+<script>
+export default {
+  name: 'InnerTable',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    },
+    itemProp: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      list: this.injectData,
+      tableData: []
+    }
+  },
+  methods: {
+    showInnerTable(id) {
+      console.log(id)
+      this.tableData = [
+        {
+          id: 1,
+          date: '2016-05-02',
+          name: '王小虎',
+          sex: '男'
+        },
+        {
+          id: 2,
+          date: '2016-05-04',
+          name: '王小虎',
+          sex: '男'
+        },
+        {
+          id: 3,
+          date: '2016-05-01',
+          name: '王小虎',
+          sex: '男'
+        },
+        {
+          id: 4,
+          date: '2016-05-03',
+          name: '王小虎',
+          sex: '男'
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/src/views/table/components/InputArea.vue
+++ b/src/views/table/components/InputArea.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="tableInner">
+    <el-input v-model="list[itemProp]" @blur="changeInput" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'InputArea',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    },
+    itemProp: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      list: this.injectData
+    }
+  },
+  methods: {
+    changeInput() {
+      console.log(this.list)
+      this.$emit('emitData', this.list)
+    }
+  }
+}
+</script>
+<style lang="css">
+.tableInner .el-input__inner {
+  border: none;
+  padding: 0;
+  height: 33px;
+}
+</style>
--- a/src/views/table/components/demo1Sub.vue
+++ b/src/views/table/components/demo1Sub.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <el-tag size="medium">{{ injectData.name }}</el-tag>
+  </div>
+</template>
+<script>
+export default {
+  name: 'demo1Sub',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
--- a/src/views/table/components/demo2Sub.vue
+++ b/src/views/table/components/demo2Sub.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <el-tag size="medium">{{ injectData.workTime }}</el-tag>
+  </div>
+</template>
+<script>
+export default {
+  name: 'demo2Sub',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
--- a/src/views/table/components/demo3Sub.vue
+++ b/src/views/table/components/demo3Sub.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <el-tag size="medium">11111</el-tag>
+  </div>
+</template>
+<script>
+export default {
+  name: 'demo3Sub',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  mounted() {
+    // console.log(this.injectData)
+  }
+}
+</script>
--- a/src/views/table/multiLevelHead.vue
+++ b/src/views/table/multiLevelHead.vue
@@ -0,0 +1,801 @@
+<template>
+  <div class="multi-level-head">
+    <h2>多级表头</h2>
+    <div class="demo-box">
+      <h3>多表头一</h3>
+      <base-table
+        :table-props="tableProps"
+        :table-data="tableData"
+        :page="1"
+        :limit="20"
+      />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description"></div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;base-table
+                  :table-props="tableProps"
+                  :table-data="tableData"
+                  :page="1"
+                  :limit="20"
+                /&gt;
+              &lt;<span>/template</span>&gt;
+              &lt;script&gt;
+                const tableProps = [
+                  {
+                    prop: 'equipmentName',
+                    label: '设备名称'
+                  },
+                  {
+                    prop: 'lineA',
+                    label: '有效时间(h)',
+                    children: [
+                      {
+                        prop: 'workTime',
+                        label: '工作时长'
+                      },
+                      {
+                        prop: 'workTimeRate',
+                        label: '工作时长比率'
+                      }
+                    ]
+                  },
+                  {
+                    prop: 'lineB',
+                    label: '关机时间(h)',
+                    children: [
+                      {
+                        prop: 'downTime',
+                        label: '停机时长'
+                      },
+                      {
+                        prop: 'downTimeRate',
+                        label: '停机时长比率'
+                      }
+                    ]
+                  },
+                  {
+                    prop: 'lineC',
+                    label: '中断损失',
+                    children: [
+                      {
+                        prop: 'faultTime',
+                        label: '故障时长'
+                      },
+                      {
+                        prop: 'faultTimeRate',
+                        label: '故障时长比率'
+                      }
+                    ]
+                  },
+                  {
+                    prop: 'lineD',
+                    label: '速度损失',
+                    children: [
+                      {
+                        prop: 'actualProcessingSpeed',
+                        label: '实际加工速度'
+                      },
+                      {
+                        prop: 'theoreticalProcessingSpeed',
+                        label: '理论加工速度'
+                      },
+                      {
+                        prop: 'speedActuationRate',
+                        label: '速度开动率'
+                      }
+                    ]
+                  }
+                ]
+                export default {
+                  mounted() {
+                    this.tableData = [
+                      {
+                        equipmentName: '设备1',
+                        workTime: 100,
+                        workTimeRate: 0.5,
+                        downTime: 5,
+                        downTimeRate: 0.02,
+                        faultTime: 0,
+                        faultTimeRate: 0,
+                        actualProcessingSpeed: 10,
+                        theoreticalProcessingSpeed: 10,
+                        speedActuationRate: 0.3
+                      },
+                      {
+                        equipmentName: '设备2',
+                        workTime: 100,
+                        workTimeRate: 0.5,
+                        downTime: 5,
+                        downTimeRate: 0.02,
+                        faultTime: 0,
+                        faultTimeRate: 0,
+                        actualProcessingSpeed: 10,
+                        theoreticalProcessingSpeed: 10,
+                        speedActuationRate: 0.3
+                      },
+                      {
+                        equipmentName: '设备3',
+                        workTime: 100,
+                        workTimeRate: 0.5,
+                        downTime: 5,
+                        downTimeRate: 0.02,
+                        faultTime: 0,
+                        faultTimeRate: 0,
+                        actualProcessingSpeed: 10,
+                        theoreticalProcessingSpeed: 10,
+                        speedActuationRate: 0.3
+                      }
+                    ]
+                  }
+                }
+              &lt;script&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>多表头一(自定义列模板)</h3>
+      <base-table
+        :table-props="tableProps3"
+        :table-data="tableData"
+        :page="1"
+        :limit="20"
+      />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description"></div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;base-table
+                :table-props="tableProps"
+                :table-data="tableData"
+                :page="1"
+                :limit="20"
+                /&gt;
+              &lt;<span>/template</span>&gt;
+              &lt;script&gt;
+              const tableProps = [
+                {
+                  prop: 'equipmentName',
+                  label: '设备名称'
+                },
+                {
+                  prop: 'lineA',
+                  label: '有效时间(h)',
+                  children: [
+                    {
+                      prop: 'workTime',
+                      label: '工作时长',
+                      subcomponent: demo2Sub
+                    },
+                    {
+                      prop: 'workTimeRate',
+                      label: '工作时长比率'
+                    }
+                  ]
+                },
+                {
+                  prop: 'lineB',
+                  label: '关机时间(h)',
+                  children: [
+                    {
+                      prop: 'downTime',
+                      label: '停机时长'
+                    },
+                    {
+                      prop: 'downTimeRate',
+                      label: '停机时长比率'
+                    }
+                  ]
+                },
+                {
+                  prop: 'lineC',
+                  label: '中断损失',
+                  children: [
+                    {
+                      prop: 'faultTime',
+                      label: '故障时长'
+                    },
+                    {
+                      prop: 'faultTimeRate',
+                      label: '故障时长比率'
+                    }
+                  ]
+                },
+                {
+                  prop: 'lineD',
+                  label: '速度损失',
+                  children: [
+                    {
+                      prop: 'actualProcessingSpeed',
+                      label: '实际加工速度'
+                    },
+                    {
+                      prop: 'theoreticalProcessingSpeed',
+                      label: '理论加工速度'
+                    },
+                    {
+                      prop: 'speedActuationRate',
+                      label: '速度开动率'
+                    }
+                  ]
+                }
+              ]
+                export default {
+                  mounted() {
+                    this.tableData = [
+                      {
+                        equipmentName: '设备1',
+                        workTime: 100,
+                        workTimeRate: 0.5,
+                        downTime: 5,
+                        downTimeRate: 0.02,
+                        faultTime: 0,
+                        faultTimeRate: 0,
+                        actualProcessingSpeed: 10,
+                        theoreticalProcessingSpeed: 10,
+                        speedActuationRate: 0.3
+                      },
+                      {
+                        equipmentName: '设备2',
+                        workTime: 100,
+                        workTimeRate: 0.5,
+                        downTime: 5,
+                        downTimeRate: 0.02,
+                        faultTime: 0,
+                        faultTimeRate: 0,
+                        actualProcessingSpeed: 10,
+                        theoreticalProcessingSpeed: 10,
+                        speedActuationRate: 0.3
+                      },
+                      {
+                        equipmentName: '设备3',
+                        workTime: 100,
+                        workTimeRate: 0.5,
+                        downTime: 5,
+                        downTimeRate: 0.02,
+                        faultTime: 0,
+                        faultTimeRate: 0,
+                        actualProcessingSpeed: 10,
+                        theoreticalProcessingSpeed: 10,
+                        speedActuationRate: 0.3
+                      }
+                    ]
+                  }
+                }
+              &lt;script&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>多表头二</h3>
+      <el-button @click="getData">click me 调接口拿数据,动态生成表格</el-button>
+      <base-table
+        v-if="trueTableProps.length > 0 ? true : false"
+        :table-props="trueTableProps"
+        :table-data="tableData3"
+        :span-method="spanMethod"
+        :page="1"
+        :limit="20"
+      />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description"></div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;base-table
+                :table-props="tableProps"
+                :table-data="tableData"
+                :page="1"
+                :limit="20"
+                /&gt;
+              &lt;<span>/template</span>&gt;
+              &lt;script&gt;
+                export default {
+                  methods: {
+                    getData() {
+                      let aa = []
+                      let moreData = [
+                        {
+                          process: '综合',
+                          data: [
+                            {
+                              equipmentName: '上片投入数量',
+                              data: aa
+                            },
+                            {
+                              equipmentName: '机器人投入数',
+                              data: aa
+                            },
+                            {
+                              equipmentName: '良品总投入数',
+                              data: aa
+                            },
+                            {
+                              equipmentName: '工序损耗',
+                              data: aa
+                            }
+                          ]
+                        },
+                        {
+                          process: '上片',
+                          data: [
+                            {
+                              equipmentName: '上片损失',
+                              data: aa
+                            }
+                          ]
+                        },
+                        {
+                          process: '精切',
+                          data: [
+                            {
+                              equipmentName: '精切损失',
+                              data: aa
+                            },
+                            {
+                              equipmentName: '精切抽检',
+                              data: aa
+                            }
+                          ]
+                        }
+                      ]
+                      for (let i = 0; i &lt; 30; i++) {
+                        let a = {
+                          time: '2022-11-' + i,
+                          eqCT: 0.01,
+                          eqTT: 0.62,
+                          lineCT: 0.73,
+                          lineTT: 0.45
+                        }
+                        aa.push(a)
+                      }
+                      this.numArr = []
+                      let num = 0
+                      const tableConfig = []
+                      this.chartDataArr = []
+                      const dataArr = moreData.map((item, index) => {
+                        let dataArr = []
+                        if (item.data) {
+                          this.chartDataArr = this.chartDataArr.concat(item.data)
+                          num += item.data.length
+                          this.numArr.push(num)
+                          dataArr = item.data.map((z, idx) => {
+                            const dataArr = {}
+                            z.data.forEach((i) => {
+                              // 动态生成tableConfig
+                              if (index === 0 && idx === 0) {
+                                tableConfig.push({
+                                  label: i.time,
+                                  prop: i.time,
+                                  children: [
+                                    { prop: i.time + 'eqCT', label: '设备CT' },
+                                    { prop: i.time + 'eqTT', label: '设备TT' },
+                                    { prop: i.time + 'lineCT', label: '产线CT' },
+                                    {
+                                      prop: i.time + 'lineTT',
+                                      label: '产线TT',
+                                      subcomponent: demo3Sub
+                                    }
+                                  ]
+                                })
+                              }
+                              // 合并数据集
+                              dataArr[i.time + 'eqCT'] = i.eqCT
+                              dataArr[i.time + 'eqTT'] = i.eqTT
+                              dataArr[i.time + 'lineCT'] = i.lineCT
+                              dataArr[i.time + 'lineTT'] = i.lineTT
+                              dataArr.process = item.process
+                              dataArr.equipmentName = z.equipmentName
+                            })
+                            console.log(dataArr)
+                            return dataArr
+                          })
+                        }
+                        return dataArr
+                      })
+                      console.log(tableConfig)
+                      this.trueTableProps = this.tableProp2.concat(tableConfig)
+                      console.log(this.trueTableProps)
+                      this.tableData = this.flatten(dataArr)
+                      console.log(this.tableData)
+                    },
+                    // tree->[]
+                    flatten(arr) {
+                      var res = []
+                      for (var i = 0; i &lt; arr.length; i++) {
+                        if (Array.isArray(arr[i])) {
+                          res = res.concat(this.flatten(arr[i]))
+                        } else {
+                          res.push(arr[i])
+                        }
+                      }
+                      return res
+                    },
+                    spanMethod({ rowIndex, columnIndex }) {
+                      if (columnIndex === 1) {
+                        if (rowIndex === 0) {
+                          return [this.numArr[0], 1]
+                        } else if (this.numArr.indexOf(rowIndex) >= 0) {
+                          const rowNum =
+                            this.numArr[this.numArr.indexOf(rowIndex) + 1] -
+                            this.numArr[this.numArr.indexOf(rowIndex)]
+                          return [rowNum, 1]
+                        } else {
+                          return [0, 0]
+                        }
+                      }
+                    }
+                  }
+                }
+              &lt;script&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import demo2Sub from './components/demo2Sub'
+import demo3Sub from './components/demo3Sub'
+const tableProps = [
+  {
+    prop: 'equipmentName',
+    label: '设备名称'
+  },
+  {
+    prop: 'lineA',
+    label: '有效时间(h)',
+    children: [
+      {
+        prop: 'workTime',
+        label: '工作时长'
+      },
+      {
+        prop: 'workTimeRate',
+        label: '工作时长比率'
+      }
+    ]
+  },
+  {
+    prop: 'lineB',
+    label: '关机时间(h)',
+    children: [
+      {
+        prop: 'downTime',
+        label: '停机时长'
+      },
+      {
+        prop: 'downTimeRate',
+        label: '停机时长比率'
+      }
+    ]
+  },
+  {
+    prop: 'lineC',
+    label: '中断损失',
+    children: [
+      {
+        prop: 'faultTime',
+        label: '故障时长'
+      },
+      {
+        prop: 'faultTimeRate',
+        label: '故障时长比率'
+      }
+    ]
+  },
+  {
+    prop: 'lineD',
+    label: '速度损失',
+    children: [
+      {
+        prop: 'actualProcessingSpeed',
+        label: '实际加工速度'
+      },
+      {
+        prop: 'theoreticalProcessingSpeed',
+        label: '理论加工速度'
+      },
+      {
+        prop: 'speedActuationRate',
+        label: '速度开动率'
+      }
+    ]
+  }
+]
+const tableProp2 = [
+  {
+    prop: 'process',
+    label: '工序'
+  },
+  {
+    prop: 'equipmentName',
+    label: '设备名称'
+  }
+]
+const tableProps3 = [
+  {
+    prop: 'equipmentName',
+    label: '设备名称'
+  },
+  {
+    prop: 'lineA',
+    label: '有效时间(h)',
+    children: [
+      {
+        prop: 'workTime',
+        label: '工作时长',
+        subcomponent: demo2Sub
+      },
+      {
+        prop: 'workTimeRate',
+        label: '工作时长比率'
+      }
+    ]
+  },
+  {
+    prop: 'lineB',
+    label: '关机时间(h)',
+    children: [
+      {
+        prop: 'downTime',
+        label: '停机时长'
+      },
+      {
+        prop: 'downTimeRate',
+        label: '停机时长比率'
+      }
+    ]
+  },
+  {
+    prop: 'lineC',
+    label: '中断损失',
+    children: [
+      {
+        prop: 'faultTime',
+        label: '故障时长'
+      },
+      {
+        prop: 'faultTimeRate',
+        label: '故障时长比率'
+      }
+    ]
+  },
+  {
+    prop: 'lineD',
+    label: '速度损失',
+    children: [
+      {
+        prop: 'actualProcessingSpeed',
+        label: '实际加工速度'
+      },
+      {
+        prop: 'theoreticalProcessingSpeed',
+        label: '理论加工速度'
+      },
+      {
+        prop: 'speedActuationRate',
+        label: '速度开动率'
+      }
+    ]
+  }
+]
+export default {
+  name: 'MultiLevelHead',
+  data() {
+    return {
+      tableProps,
+      tableData: [],
+      tableProp2,
+      tableData3: [],
+      numArr: [],
+      chartDataArr: [],
+      trueTableProps: [],
+      tableProps3
+    }
+  },
+  mounted() {
+    this.tableData = [
+      {
+        equipmentName: '设备1',
+        workTime: 100,
+        workTimeRate: 0.5,
+        downTime: 5,
+        downTimeRate: 0.02,
+        faultTime: 0,
+        faultTimeRate: 0,
+        actualProcessingSpeed: 10,
+        theoreticalProcessingSpeed: 10,
+        speedActuationRate: 0.3
+      },
+      {
+        equipmentName: '设备2',
+        workTime: 100,
+        workTimeRate: 0.5,
+        downTime: 5,
+        downTimeRate: 0.02,
+        faultTime: 0,
+        faultTimeRate: 0,
+        actualProcessingSpeed: 10,
+        theoreticalProcessingSpeed: 10,
+        speedActuationRate: 0.3
+      },
+      {
+        equipmentName: '设备3',
+        workTime: 100,
+        workTimeRate: 0.5,
+        downTime: 5,
+        downTimeRate: 0.02,
+        faultTime: 0,
+        faultTimeRate: 0,
+        actualProcessingSpeed: 10,
+        theoreticalProcessingSpeed: 10,
+        speedActuationRate: 0.3
+      }
+    ]
+  },
+  methods: {
+    getData() {
+      let aa = []
+      let moreData = [
+        {
+          process: '综合',
+          data: [
+            {
+              equipmentName: '上片投入数量',
+              data: aa
+            },
+            {
+              equipmentName: '机器人投入数',
+              data: aa
+            },
+            {
+              equipmentName: '良品总投入数',
+              data: aa
+            },
+            {
+              equipmentName: '工序损耗',
+              data: aa
+            }
+          ]
+        },
+        {
+          process: '上片',
+          data: [
+            {
+              equipmentName: '上片损失',
+              data: aa
+            }
+          ]
+        },
+        {
+          process: '精切',
+          data: [
+            {
+              equipmentName: '精切损失',
+              data: aa
+            },
+            {
+              equipmentName: '精切抽检',
+              data: aa
+            }
+          ]
+        }
+      ]
+      for (let i = 0; i < 30; i++) {
+        let a = {
+          time: '2022-11-' + i,
+          eqCT: 0.01,
+          eqTT: 0.62,
+          lineCT: 0.73,
+          lineTT: 0.45
+        }
+        aa.push(a)
+      }
+      this.numArr = []
+      let num = 0
+      const tableConfig = []
+      this.chartDataArr = []
+      const dataArr = moreData.map((item, index) => {
+        let dataArr = []
+        if (item.data) {
+          this.chartDataArr = this.chartDataArr.concat(item.data)
+          num += item.data.length
+          this.numArr.push(num)
+          dataArr = item.data.map((z, idx) => {
+            const dataArr = {}
+            z.data.forEach((i) => {
+              // 动态生成tableConfig
+              if (index === 0 && idx === 0) {
+                tableConfig.push({
+                  label: i.time,
+                  prop: i.time,
+                  children: [
+                    { prop: i.time + 'eqCT', label: '设备CT' },
+                    { prop: i.time + 'eqTT', label: '设备TT' },
+                    { prop: i.time + 'lineCT', label: '产线CT' },
+                    {
+                      prop: i.time + 'lineTT',
+                      label: '产线TT',
+                      subcomponent: demo3Sub
+                    }
+                  ]
+                })
+              }
+              // 合并数据集
+              dataArr[i.time + 'eqCT'] = i.eqCT
+              dataArr[i.time + 'eqTT'] = i.eqTT
+              dataArr[i.time + 'lineCT'] = i.lineCT
+              dataArr[i.time + 'lineTT'] = i.lineTT
+              dataArr.process = item.process
+              dataArr.equipmentName = z.equipmentName
+            })
+            console.log(dataArr)
+            return dataArr
+          })
+        }
+        return dataArr
+      })
+      console.log(tableConfig)
+      this.trueTableProps = this.tableProp2.concat(tableConfig)
+      console.log(this.trueTableProps)
+      this.tableData3 = this.flatten(dataArr)
+      console.log(this.tableData3)
+    },
+    // tree->[]
+    flatten(arr) {
+      var res = []
+      for (var i = 0; i < arr.length; i++) {
+        if (Array.isArray(arr[i])) {
+          res = res.concat(this.flatten(arr[i]))
+        } else {
+          res.push(arr[i])
+        }
+      }
+      return res
+    },
+    spanMethod({ rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        if (rowIndex === 0) {
+          return [this.numArr[0], 1]
+        } else if (this.numArr.indexOf(rowIndex) >= 0) {
+          const rowNum =
+            this.numArr[this.numArr.indexOf(rowIndex) + 1] -
+            this.numArr[this.numArr.indexOf(rowIndex)]
+          return [rowNum, 1]
+        } else {
+          return [0, 0]
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.multi-level-head {
+  .demo-box {
+    margin-bottom: 40px;
+    .description code {
+      color: #5e6d82;
+      background-color: #e6effb;
+      margin: 0 4px;
+      display: inline-block;
+      padding: 1px 5px;
+      font-size: 12px;
+      border-radius: 3px;
+      height: 18px;
+      line-height: 18px;
+    }
+  }
+}
+</style>
--- a/src/views/table/pagination.vue
+++ b/src/views/table/pagination.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="pagination">
+    <h2>分页</h2>
+    <div class="demo-box">
+      <h3>完整功能</h3>
+      <pagination :limit="20" :total="100" />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description"></div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;pagination :limit="20" :total="100" /&gt;
+              &lt;<span>/template</span>&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>简单版固定的pageSize</h3>
+      <pagination :limit="3" :total="10" layout="total, prev, pager, next" />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description"></div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;pagination :limit="3" :total="10" layout="total, prev, pager, next" /&gt;
+              &lt;<span>/template</span>&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>totla为0时分页消失</h3>
+      <el-button type="primary" @click="toggleTotal"
+        >点击改变total为0或者100</el-button
+      >
+      <pagination :limit="20" :total="total" />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description"></div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;pagination :limit="20" :total="total" /&gt;
+              &lt;<span>/template</span>&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>改变当前page或者pageSize</h3>
+      <pagination
+        :limit.sync="listQuery.size"
+        :page.sync="listQuery.current"
+        :total="200"
+        @pagination="getList"
+      />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description"></div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;pagination
+                  :limit.sync="listQuery.size"
+                  :page.sync="listQuery.current"
+                  :total="200"
+                  @pagination="getList"
+                /&gt;
+              &lt;<span>/template</span>&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>完整功能按钮带背景色的</h3>
+      <pagination :limit="20" :total="100" :background="true" />
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div class="description"></div>
+          <div>
+            <pre>
+              &lt;<span>template</span>&gt;
+                &lt;pagination :limit="20" :total="100" :background="true" /&gt;
+              &lt;<span>/template</span>&gt;
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'paginationShow',
+  data() {
+    return {
+      total: 100,
+      listQuery: {
+        current: 1,
+        size: 20
+      }
+    }
+  },
+  methods: {
+    toggleTotal() {
+      this.total = this.total === 0 ? 100 : 0
+    },
+    getList(val) {
+      console.log(val)
+      console.log(this.listQuery)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pagination {
+  .demo-box {
+    margin-bottom: 40px;
+    .description code {
+      color: #5e6d82;
+      background-color: #e6effb;
+      margin: 0 4px;
+      display: inline-block;
+      padding: 1px 5px;
+      font-size: 12px;
+      border-radius: 3px;
+      height: 18px;
+      line-height: 18px;
+    }
+  }
+}
+</style>
--- a/src/views/table/singleHead.vue
+++ b/src/views/table/singleHead.vue
--- a/theme/fonts/element-icons.ttf
+++ b/theme/fonts/element-icons.ttf
--- a/theme/fonts/element-icons.woff
+++ b/theme/fonts/element-icons.woff
--- a/theme/index.css
+++ b/theme/index.css
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})