1. Based on Vue + Element, solve the problem that when the table scroll bar slides to the bottom, the paging scroll bar is not set at the top
TableKey = 0; tableKey = 0; tableKey = 0Copy the code2. Vue particle background plug-in
npm install vue-particles --save-dev
3. A value is displayed in the drop-down list box but the problem cannot be selected
Problem description: When VUE+ Element is used for development, the output value is required for editing the page, but other parameter values cannot be selected in the drop-down box. Solution: Forcibly refresh, invoking in the change event in the drop-down box
This.forceupdate () has reached forced refreshCopy the code4. Vue project error Redirected when going from “/login” to “/” via a navigation Guard
Solution: Add the following code to router.js
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
Copy the code5. The VUE route is forwarded to the external link
{path: 'update-img', Component: Layout, children: [{path: 'https://baidu.com', // Link to link meta: {title: 'Upload image'}}]},Copy the code6. Element Table records multi-page checked data
Select * from table where ref="table" Table adds @selectable -change="selectTable" or @select="select" <el-table ref=" TABLE ":key="tableKey" :data="tableData" border Stripe style="width: 100%" :height="tableHeight" @selection-change="selectTable" @select="select" > MultipleSelection: {} Step 4: SelectTable event, according to data paging storage. This searchData Page. PageIndex is Page / / list select selectTable (row) { Enclosing multipleSelection [this searchData. Page. PageIndex] = row} step 5: Look for the same data in the list based on the recorded data, Echo check check () {enclosing nextTick (() = > {the if (this. MultipleSelection [this. SearchData. Page. PageIndex]) { this.multipleSelection[this.searchData.Page.PageIndex].map(item => { this.tableData.map(val => { if (item.FId === Val. FId) {this. $refs. Table. ToggleRowSelection (val)}})})}})} step 6: I here is the switch pages to get the data, so called when to get the data check method \ step 7: The data in this.multipleSelection is all the checked dataCopy the code7. Get the absolute value
var a = -1
Math.abs(a) // 1
Copy the code8. Delete the dependent packages
rimraf node_modules
9. Conversion between character pass and array
/ / character transfer array var a = '1, 2, 3' arr. Split (', '). The map (Number) / / / / an array of characters in [1, 2, 3] the var arr = [1, 2, 3] arr. ToString () / / "1, 2, 3"Copy the code10. Recommend a very good VUE background management project template
https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fdashboard
11. Recommend a tool for converting MD styles, which can be downloaded into HTML and is also a good option for resumes
http://md.aclickall.com/
12. Two Element table columns share the same header and merge the same column
<el-table :data="tableData" border stripe :header-cell-style="setColSpan" style="width: 100%; max-height: 300px" class="ados-table" > <el-table-column label=" sort "align="center" min-width="100" prop="BrandSort"> <template slot-scope="scope"> <el-input v-model="scope.row.BrandSort" class="sortInput" /> </template> </el-table-column> <el-table-column label=" code "align="center" min-width="100" prop="CustomerName"> <el-table-column label="" align="center" min-width="100" prop="CustomerName1" show-overflow-tooltip> <template slot-scope="scope"> <el-input v-model="scope.row.CustomerName" /> </template> </el-table-column> <el-table-column label="" align="center" min-width="100" prop="CustomerName1" show-overflow-tooltip> <template slot-scope="scope"> <el-input V-model ="scope.row.CustomerName" /> </template> </el-table-column> </el-table-column> <el-table-column label=" place" min-width="140" align="center" prop="SafeCompany"> <template slot-scope="scope"> <el-input V-model ="scope.row.CustomerName" /> </template> </el-table-column> <el-table-column label=" sheet "align="center" Align ="center" align="center" min-width="100"> <template slot-scope="scope"> <el-input V-model ="scope.row.CustomerName"> <template slot="append"> </template> </el-input> </template> </el-table-column> <el-table-column label=" replace "align="center" min-width="100"> <template slot-scope="scope"> <el-input V-model ="scope.row.CustomerName"> <template slot="append"> </template> </el-input> </template> </el-table-column> </el-table-column> </el-table> // merge header setColSpan({row, column, rowIndex, columnIndex }) { if (rowIndex === 0 && columnIndex === 1) { this.$nextTick(() => { if (document.getElementsByClassName(column.id).length ! == 0) { document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2) return false } }) } if (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1)) { return { display: SetTable () {const spanOneArr = [] var concatOne = 0 // Determine whether it is the last level this.tableData.forEach((item, index) => { if (index === 0) { spanOneArr.push(1) } else { if (item.OrderNumber === this.tableData[index - SpanOneArr [concatOne] += 1 Spanonearr.push (0)} else {spanonearr.push (1) concatOne = index } } }) return { one: SpanOneArr}}, setTableNumber() {const spanOneArr = [] var concatOne = 0 this.tableData.foreach ((item, index) => { if (index === 0) { spanOneArr.push(1) } else { if (item.FrameNumber === this.tableData[index - SpanOneArr [concatOne] += 1 Spanonearr.push (0)} else {spanonearr.push (1) concatOne = index } } }) return { one: ObjectSpanMethod ({row, column, rowIndex, columnIndex }) { if (columnIndex === 1 || columnIndex === 10) { const _row = (this.setTable(this.tableData).one)[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } if (columnIndex === 7 || columnIndex === 8 || columnIndex === 9) { // setTableNumber const _row = (this.setTableNumber(this.tableData).one)[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } }Copy the codeThe effect is as follows:
13. CSS Text gradient
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
Copy the code