Recently in the vue-Element UI based admin management platform, tread pit or many. I would like to record some practical ones and some pits. If there is something you need and there is a solution, it would be my pleasure.

The basic template used is from github.com/PanJiaChen/…) (Thanks to the author!)

Use vue-Router and Element UI NavMenu dynamic rendering sideBar

For example, var routersSingle = {Path: '/' + routers[I]. Url, Component: Layout, Name: routers[I]. Url, meta: {title: routers[i].name, icon: 'tree', id: routers[i].id }, children: [], alwaysShow: true }; Secondary route attributes such as var routersSingleChildren = {Component: () => import(`@/views/${state.addRouters[i].name}/${routers[j].url}`), path: routers[j].url, name: routers[j].url, meta: { title: After the definition of routers, we use a simple way to assemble the routes to form the required routing list. As the routes are provided by the back end, all but the most common ones can be used. Modules = routers state. AddRouters = [] /* Routes are combined only if the user has an access route */ if (Phones.length) { /* render parent module */ for (let I = 0; i < routers.length; If (routers[I]. Pid === 0) {var routersSingle = {path: '/' + routers[i].url, component: Layout, name: routers[i].url, meta: { title: routers[i].name, icon: 'tree', id: routers[i].id }, children: [], alwaysShow: true }; State.addrouters. push(routersSingle)}} /* Render submodule */ for (let I = 0; i < state.addRouters.length; i++) { for (let j = 0; j < routers.length; J ++) {/* If the iD is the same as the PID of the parent module, set it to the children */ if (state.addrouters [I].meta. Id === pid) {var routersSingleChildren = { component: () = > import (` @ / views / ${state. AddRouters [I] name} / ${routers [j]. Journal of url} `), / * hole here, must use the let circulation, [J]. Address: address and address of the routers[J]. Address: address and address of the phones. address: address and address of the routers[J]. Name}}}}}} else {console.log(' user has no route ')} state.addRouters /* The route from the back end has been assembled. This set of templates has been configured and described, so follow the instructions (in this js permission.js).Copy the code

Router jump hook router. BeforeEach (to, from, next)

To: information about the route that is about to enter the route from: information about the route that is leaving the route Next: a function to continue without next() this hook will completely prevent you from entering the next route. This is a good place to go if you need to get dynamic data leaving the page or about to enter the page when accessing different routes. Example: import router from './router'; import NProgress from 'nprogress'; /* Progress bar */ import 'nprogress/nprogress.css'; /* Progress bar style */ import {getToken} from '@/utils/auth'; /* Check permissions */ Router. beforeEach((to, from, Next) => {/* Do something */ * Check whether the user's token exists */ if(getToken()) {/* If (to.path) if(to.path) if(to.path) if(to.path) if(to.path) === 'login') {next({path: '/'})} else {/* If not, then do what you need to do, such as get permissions for each page */... do something next() } } })Copy the code

Element Table pit series

1. If you have a requirement that a page has several states, and the corresponding column of the table increases or decreases, be sure to add a key for each column. Otherwise, you might notice that the column position changes every time you switch states, or the table might even crash if the network speed is slightly slower. Remember, of course, that element table method doLayout() doLayout rearranges the table. This method may be called when the Table or its ancestor changes from hidden to displayed using the method: <el-table ref="yourTable"><el-table> <script> this.$refs.yourTable.doLayout() <script> 2. If you need to make the page scroll free and compatible with 1366*768 on PC, I use the following method: <el-table max-height="tableHeight"><el-table> <script>data() { return{ tableHeight: Document. Body. ClientHeight - a certain fixed value (e.g., 200)}} < script > this either 1366 or 1920 resolution open this page, guarantee that there will not be a scroll bar (if there is a better way to tell me, really appreciate!!! ) 3. Table Loading and border. After the data is re-rendered, the border left and top of the table will disappear and be displayed after the table is loaded. Then cause the table to shake. Treatment methods: /* Element 2.2.1 has a border, El-table --border. El-loading-parent --relative {border-left: solid 1px #ebeef5; Border-top: solid 1px #ebeef5} but after processing in safari... There seems to be some deviation.. The official set left and top to None for this reason, which is a good solution if safari is not compatibleCopy the code

Element TimePicker modification path

If you need to select a string time, and you want to select a time first and then a minute, I have a widget made from the Element Cascader selector that gives the value as a string such as' 14:00 '. For example, after the start time is selected, the end time cannot be any time before the start time. The end time also limits the start time. The output only needs to be a string.Copy the code

Click sideBar to update the current route

What update means: Reload this component, and the life cycle will go once. The method adopted before is to take a random parameter query in sideBar, such as New Date(), and then Watch the change of routing in each page, and perform the function of requesting data. For the sake of simplicity, so we temporarily use the following method, if there is a better method, also hope to tell me........... <router-view v-if="aliveRouter" ><router-view> Add a status value aliveRouter when to change aliveRouter if left sideBar is not triggered Router. BeforeEach (to, from, next) proves that there is no forward route. This. AliveRouter = false; this.$nextTick(() => { this.aliveRouuter = true; ) Then the route is reloaded. If the code is not executed after triggering the route for so long, there are many ways to control it. I set a flag by myself. If entering beforeEach changes flag = false then the above code will only execute if flag = trueCopy the code