This article mainly summarizes some small problems encountered in the project and the corresponding solutions to avoid future pitfalls. In the follow-up supplement, if you have different answers to these problems, please feel free to comment
1. The input box uses the V-model binding value, but cannot be changed
// The first case
<el-input v-model="form.title"></el-input>
/ / initialization
data () {
return {
form: {}
}
}
FormData is the data passed by the parent component
mounted (){
this.form.title = this.formData.title
}
// This does not work because the title is not initialized
data () {
return {
form: {title:''}}
}
// The second case
To use in forms, use :model=""Assign a value to the input field
<el-form :model="formData">
<el-form-item>
<el-input placeholder="Please enter" :model="formData.value" size="small"/>
</el-form-item>
</el-form>
// Solution, change to
<el-input placeholder="Please enter" v-model="formData.value" size="small"/>
Copy the code2. The text content is not translated into HTML tags
I wanted to enter the following, but when I saved the data, it became AAA
Workaround: If it’s HTML content, javascript, XML, or other special content, use < XMP >
if it’s simple text with special characters like Spaces and carriage returns on top of the text withtags
3. Basic export function
SensitiveOperationExport(params).then(res => {
if (res.data.code === '200') {
// Here is the export
window.location.href = res.data.data.path
this.$message({
message: 'Export successful! '.
type: 'success'
})
} else {
this.$message.error({message: 'Export failed! '})
}
})
Copy the code4. When using Element Table, disable some check boxes
<el-table-column type="selection" align="center" fixed :selectable="selectable"></el-table-column>
Copy the codeThe operator selectable is available only for columns with type= Selection. Function returns a value that determines whether the row CheckBox can be checked
// Determine whether table data is optional
selectable(row, index) {
if (row.IsDefault === 0) {
return false // Return false for non-selectable data
} else {
return true
}
}
Copy the code5. The data returned by the interface is in json type, which can be converted when displayed in a table
// Data structure content: "{'title': 'this is title'}"
this.title = JSON.parse(content).title
Copy the code6. Click the picture in the list to enlarge it
Install viewer, can support image switching, rotation, zoom and other functions, specific operation documents can be baidu view, use in the page is also very simple, the first step, global configuration
// Import configuration in main.js
Viewer.setDefaults({
'zIndex': 9999.
'inline': false.// Whether thumbnails are displayed by default
'button': true.// Upper right button
'navbar': true.// Bottom thumbnail
'title': true.// The current image title
'toolbar': true.// Bottom toolbar
'tooltip': true.// Displays the zoom percentage
'movable': false.// Can be moved
'zoomable': true.// Whether it can be scaled
'rotatable': true.// Whether it can be rotated
'scalable': true.// Can be flipped
'transition': true.// Excessive CSS3 usage
'fullscreen': true.// Whether to play in full screen
'keyboard': true.// Whether keyboard is supported
'url': 'data-source'
})
// use in the page
<viewer>
<img :src="scope.row.content "/>
</viewer>
Copy the code7. Move up and move down
Generally speaking, move up and move down is to drop the interface operation, but there are also not to drop the interface
/ up
moveUp (index, row) {
if (index > 0) {
let upDate = this.tableData[index - 1]
this.tableData.splice(index - 1.1)
this.tableData.splice(index, 0, upDate)
}
},
/ / move down
moveDown (index, row) {
if ((index + 1) = = =this.tableData.length) {
console.log('It's the last one, it can't be moved down.')
} else {
let downDate = this.tableData[index + 1]
this.tableData.splice(index + 1.1)
this.tableData.splice(index, 0, downDate)
}
}
Copy the code8. Complete and reverse selection of the form
<el-table :data="tableData" border :select-all="allSelect" @selection-change="changeFun" ref="form" height="700"></el-table>
// tableData is tableData
<div>
<el-button @click="toggleSelect(tableData)"> all < / el - button >
<el-button @click="reverseSelect(tableData)"> unclick < / el - button >
</div>
/ / all
toggleSelect (rows) {
if (rows) {
rows.forEach(row => {
this.$refs.form.toggleRowSelection(row, !this.allSelect)
})
this.allSelect = !this.allSelect
}
},
/ / the choice
reverseSelect (rows) {
let checked = this.data
if (rows) {
rows.map(row => {
checked && checked.map(item => {
if(row.index ! == item.index) {
this.$refs.form.toggleRowSelection(item, false)
this.$refs.form.toggleRowSelection(row, true)
} else {
this.$refs.form.toggleRowSelection(row, false)
}
})
})
if (checked.length === 0) {
rows.forEach(row => {
this.$refs.form.toggleRowSelection(row, true)
})
}
}
},
// Get the selected data
changeFun (val) {
this.data = val
}
Copy the code9. Hold down the speaking function
This function relies on the recorder. Js, which was introduced in the last article and will not be explained here
10. Table editing and save switching
// editColorShow: "// Sets sensitive operations to show edits by default
// clearEdit: '000' // replace the value of editColorShow
<el-table-column label="Operation" align="center"
width="200">
<template slot-scope="scope">
<el-button size="small" v-if="editColorShow ! == scope.$index" type="primary" @click="editColor(scope.$index, scope.row)"> edit < / el - button >
<el-button size="small" v-if="editColorShow === scope.$index" type="primary" @click="submitSettingOperation(scope.$index, scope.row)"> save < / el - button >
</template>
</el-table-column>
// The method does this
editColor (index, row) {
this.editColorShow = index
},
submitSettingOperation (index, data) {
this.editColorShow = this.clearEdit
}
Copy the code11. A deep copy
The first:
function copy(arr) {
var newObj = arr.constructor === Array ? [] : {}
if (typeof arr === 'object') {
for (var i in arr) {
if (typeof arr[i] === 'object') {
newObj[i] = copy(arr[i])
}
newObj[i] = arr[i]
}
return newObj
} else {
return
}
}
Copy the codeThe second,
function copy (obj) {
var newObj = obj.constructor === Array ? [] : {}
newObj = JSON.parse(JSON.stringify(obj))
return newObj
}
Copy the code12. Form reset issues
Xx = “, which is fine if there are one or two forms, but not very good if there are many forms. We found a very convenient operation that takes only one line of code
this.$refs['infoForm'].resetFields()
// The input box to be reset must have the prop property set
Copy the code13. There are two ways to export TXT files
The first pure front-end download
fetch('https://xxxxx.com/' + item.path).then(res= > res.blob().then(blob= > {
var a = document.createElement('a')
var url = window.URL.createObjectURL(blob)
var filename = 'text.txt'
a.href = url
a.download = filename
a.click()
window.URL.revokeObjectURL(url)
}))
Copy the codeThe second kind of access to TXT content after download
createDownload (fileName, content) {
var blob = new Blob([content])
var link = document.createElement('a')
var bodyEle = document.getElementsByTagName('body') [0]
link.innerHTML = fileName
link.download = fileName
link.href = URL.createObjectURL(blob)
bodyEle.appendChild(link)
link.click()
bodyEle.removeChild(link)
}
Copy the codeBoth can be downloaded, but ensure that the downloaded interface can be accessed in the page without cross-domain problems
14. Exel derived
Blob.js and Export2Excel. Js files are downloaded and imported into the file
// npm install file-saver xlsx script-loader --save
/ / export
onExportExcel (formName) {
import('@/vendor/Export2Excel').then(excel= > {
// Table title
const tHeader = ['Order Number'.'name'.'Staff No.'.'Mobile phone Number'.'the company']
// The corresponding field
const filterVal = ['sn'.'user_name'.'user_no'.'user_phone'.'user_company']
const data = this.formatJson(filterVal, this.dataTable)
excel.export_json_to_excel({
header: tHeader,
data,
filename: 'Order list'
})
})
},
formatJson (filterVal, jsonData) {
let arr = jsonData.map(v= > filterVal.map(j= > v[j]))
return arr
}
Copy the codeThe second option is vuE-json-excel. For details, see vue-json-excel
// NPM install vue-json-excel
// used in vue
<download-excel
class="btn btn-default"
:data = "json_data"
:fields = "json_fields"
worksheet = "My Worksheet"
name = "filename.xls">
</download-excel>
data() {
return {
// The field to export
json_fields: {
'Complete name': 'name'.
'City': 'city'.
'Telephone': 'phone.mobile'.
'Telephone 2' : {
field: 'phone.landline'.
callback: (value) => {
return `Landline Phone - ${value}`;
}
},
},
// The data to export
json_data: [
{
'name': 'Tony Peña'.
'city': 'New York'.
'country': 'United States'.
'birthdate': '1978-03-15'.
'phone': {
'mobile': "541-754-3010".
'landline': '(541) 754-3010'
}
},
{
'name': 'Thessaloniki'.
'city': 'Athens'.
'country': 'Greece'.
'birthdate': '1987-11-23'.
'phone': {
'mobile': '+ 1 855 275 5071.
'landline': '(2741) 2621-244'
}
}
].
json_meta: [
[
{
'key': 'charset'.
'value': 'utf-8'
}
]
]
}
}
Copy the code15. In the navigation bar, use iconFont and select the color change problem
First look at the comparison
The project is based on Element-UI development, so ICONS cannot be avoided, so Ali Gallery is a good choice. The problem here is that after the left navigation bar is selected, the text color changes, but the ICONS remain the same. Generally speaking, there are three ways to reference Ali Gallery: Unicode, Font Class, symbol; I used symbol for reference, as follows
1. Select an icon in SVG format. Download SVG format 2. Create an icon folder to store ICONS and an svgIcon folder to use ICONS
3. The reason why the icon does not change color is that the downloaded icon itself has a color, so when the icon is obtained through symbol, the fill attribute will be added to the PATH of SVG, so the color cannot be changed. You can leave the fill attribute blank in the icon, and this can be solved
16. Vue fuzzy search routing function
Requirements: A search box is provided in the navigation bar. You can jump to the specified page according to the entered page name. The code is as follows
<template>
<div>
<el-select
ref="headerSearchSelect"
v-model="search"
:remote-method="querySearch" // Remote search method
remote // Whether the search is remote
filterable // Whether it is searchable
default-first-option // Press Enter in the input box to return the first matching item, which must be used with filterable or remote
placeholder="Search"
class="header-search-select"
@change="change"
>
<el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
</el-select>
</div>
</template>
<script>
import path from 'path';
export default {
// Get all visible page routes under the current account
props: {
routers: {
type: Array
}
},
data () {
return {
search: ' '.
options: [],
searchPool: []
}
},
computed: {
routes() {
return this.routers
}
},
mounted () {
this.searchPool = this.generateRoutes(this.routes)
},
methods: {
// Remote search
querySearch (query) {
if(query ! = =' ') {
// Array decrement
this.options = Array.from(new Set(this.searchQuery(query)))
} else {
this.options = []
}
},
// Jump when changing
change (val) {
// Determine whether the current page is the same as the search page. If the page is the same, the page will be cleared
if (val.path ! = =this.$router.history.current.path) {
this.$router.push(val.path)
// Clear the contents of the search box after jumping to the path
this.search = ' '
this.options = []
} else {
this.search = ' '
this.options = []
}
},
// Filter the routes that match the conditions
searchQuery (query) {
const list = []
this.searchPool.map(item => {
item.title.filter(items => {
if (items.indexOf(query) > - 1) {
list.push(item)
}
})
})
return list
},
// Process routing data
generateRoutes(routes, basePath = '/', prefixTitle = []) {
let res = []
for (const router of routes) {
if (router.hidden) { continue }
const data = {
path: path.resolve(basePath, router.path),
title: [...prefixTitle]
}
if (router.meta && router.meta.title) {
data.title = [...data.title, router.meta.title]
if(router.redirect ! = ='noRedirect') {
res.push(data)
}
}
// recursive child routes
if (router.children) {
const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
if (tempRoutes.length >= 1) {
res = [...res, ...tempRoutes]
}
}
}
return res
}
}
}
</script>
Copy the codeNote that the route writing method, must have a corresponding title, such as this
// When the page has no sub-menu
{
path: '/log'.
component: Home,
name: 'Log'.
redirect: '/redirect'.
children: [
{
path: 'index'.
name: 'LogIndex'.
component: _import('log/Index'),
meta: {
title: 'Log Management'.
roles: [RoleName.Super, RoleName.AfterSale],
icon: 'custom-rizhi'
}
}
]
}
// When a page has a sub-menu
{
path: '/operation'.
component: Home,
name: 'Operation'.
redirect: '/redirect'.
meta: { title: 'Operations Management', icon: 'custom-yunying1'}, // The difference is that if you have children, you must add meta here
children: [
{
path: 'payment'.
name: 'OperationPayment'.
component: _import('operation/Payment'),
meta: {
title: 'Payment Management'.
Roles: [RoleName.Operator] // Use roles to determine whether the current user has permission to view the page
}
},
{
path: 'shop'.
name: 'OperationShop'.
component: _import('operation/Shop'),
meta: {
title: 'Store Management'.
roles: [RoleName.Super, RoleName.Operator, RoleName.Staff, RoleName.Marketer]
}
},
{
path: 'banner'.
name: 'OperationBanner'.
component: _import('operation/Banner'),
meta: {
title: 'Picture Management'.
roles: [RoleName.Super, RoleName.Operator, RoleName.Staff, RoleName.Marketer]
}
}
]
}
Copy the code17. Add a few quick questions about routing
: parsed into a tag and used to specify the jump path
: view rendering component
There are two ways to route in components
import app from '@/view/app'
{
path: '/'.
component: app, // First: direct introduction
component: (a)= > import('@/view/app') // The second type is lazy loading
}
Copy the code
- Dynamic routing
{
path: '/argu:name'// Name is a dynamic route parameter
// Nested by
path: '/parent'.
children: [
{
path: '/child'
}
].
// Name the route
path: '/login'.
name: 'name'Router-link :to="{name: 'login'}"jump
}
Copy the code
- Named view that can load multiple components
<router-view/>
<router-view name="email"/>
{
path: 'names'.
components: {
default: (a)= > import('@/view/app'),
email: (a)= > import('@/view/message')
}
}
Copy the code
- There are three ways to write redirection
{
path: '/email'.
redirect: '/main'./ / the first
redirect: { / / the second
name: 'main'
},
redirect: to= > { / / the third kind
return {
name: 'main'
}
}
}
Copy the code6. Aliases (Accessing an alias is equivalent to accessing the current route)
For example, accessing main_index is equivalent to accessing main
{
path: '/main'.
alias: '/main_index'
}
Copy the code7. Jump
this.$router.push('/home') // Jump directly to the home page
// Jump to one with parameters
this.$router.push({
name: 'home'.
querry: {
// The parameter is displayed in the address bar
}
})
// Carry argument two
this.$router.push({
params: {
/ / parameters
}
})
// Carry parameter three
this.$router.push({
/ / the third kind
name: 'I'm a parameter'
path:`/home${name}`
})
Copy the code8. Replace (push and Replace are different) The push browser will record, return to the previous page, replace will treat the current page as the parent page for example: $router. Replace ({name: $router. $router. Replace ({name: $router. ‘home’ })
- Props can pass values to the router
{
path: '/about'.
/ / the first
props: {
foood: 'apple'
},
/ / the second
props: router => {
food: router.query.food // The value of food is passed in the argument
}
}
// page
props: {
foood: {
type: string.
default: 'orange'
}
}
Copy the code
routerIn the configurationmode: 'history'You can remove the address bar #, but you need backend configuration supportrouter.before()Before the jump, you can check whether you have logged in and permission before the jump
18. Randomly generate an id value –>this._uid
<span>{{index}}</span>
// Initialize the definition
index: `index_${this._uid}`
Copy the code19. Resolve vUE project browser warning issues
– Fixed an alarm when using element-UI in vUE project. I wonder if your browser will see this message when running the project (I’m using Google Chrome). Although it does not affect the project operation, it is not very comfortable to look at. ———————————————— [Violation] Added non-passive event listener to a asked-blocking ‘mousewheel’ event.consider Marking event handler as’ passive ‘to make the page more responsive
The solution is as follows: 1. Install dependency NPM I default-muti-events-s 2. Main. js import ‘default-muti-events’ 3 To solve the
[Fixed] a Deprecation warning in the vue project when using moment: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Solution as follows 1. The main. Js. Add a line moment suppressDeprecationWarnings closed 2 = true. To solve the
20. The child shell is blocked by the parent shell mask
Child plus :append-to-body=”true” Parent plus :close-on-click-modal=”false” : modal-Append-to-body =”false”
21. Formatting operations
Main. Js, add the following code page to use {{time | dateformat}}
// Format the date and time
Vue.filter('dateformat'.function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
})
Vue.filter('getDate'.function(dataStr, pattern = 'YYYY-MM-DD') {
return moment(dataStr).format(pattern)
})
Vue.filter('getTime'.function(dataStr, pattern = 'HH:mm:ss') {
return moment(dataStr).format(pattern)
})
// Format the amount
Vue.filter('money'.function(val) {
val = val.toString().replace(/\$|\,/g.' ')
if (isNaN(val)) {
val = '0'
}
const sign = (val === (val = Math.abs(val)))
val = Math.floor(val * 100 + 0.50000000001)
let cents = val % 100
val = Math.floor(val / 100).toString()
if (cents < 10) {
cents = '0' + cents
}
for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
val = val.substring(0, val.length - (4 * i + 3)) + ', ' + val.substring(val.length - (4 * i + 3))
}
return (((sign) ? ' ' : A '$') + val + '. ' + cents)
})
// Format the bank card number
Vue.filter('bankCard'.function(accNo) {
let result = ' '
let index = 0
if(accNo ! = =undefined&& accNo ! =null) {
for (let i = 0; i < accNo.length; i++) {
result += accNo.charAt(i)
index++
if (index === 4 && (i + 1! == accNo.length)) {
result += ' '
index = 0
}
}
}
return result
})
Copy the code22. Click the text in the form into the input box, and automatically get the focus
// Input box automatically get focus, custom instruction, same as methods, input add instruction V-focus
directives: {
'focus': {
// The definition of a directive
inserted(el) {
if (el.tagName.toLocaleLowerCase() === 'input') {
el.focus()
} else {
if (el.getElementsByTagName('input')) {
el.getElementsByTagName('input') [0].focus()
}
}
}
}
}
Copy the code23. Particle background
Plugin vuE-Particles is introduced
Copy the code24. Use Element table, dynamic display table, table confusion problem
<el-table>
<el-table-column v-if="checked" label="Used car price" width="200" />
</el-table>
Copy the codeThe solution is to add the ref attribute to the table and re-render the table in the updated
updated() {
this.$refs['table'].doLayout()
}
Copy the code25. Convert arrays to cascaded arrays
Cascades may be used in project requirements, but the data given by the background may not be what we want. At this time, we need to change the data format
// Cascade dropdown
<el-cascader
v-model="ParentID"
:options="options"
:props="{ value: 'PowerID', label: 'PowerName'}"
/>
Copy the codeBackground data is as follows
const arr1 = [
{ parent: '0', power: '110' },
{ parent: '110', power: '101' },
{ parent: '110', power: '102' },
{ parent: '0', power: '220' },
{ parent: '220', power: '201' },
{ parent: '220', power: '202' },
{ parent: '101', power: '1011' }
]
Copy the codeOur ideal number would be something like this
{ parent: '0', power: '110', children: [
{ parent: '110', power: '101', children: [{ parent: '101', power: '1011'}},
{ parent: '110', power: '102' }
]},
{{ parent: '0', power: '220' }, children: [
{ parent: '220', power: '201' },
{ parent: '220', power: '202' }
]}
Copy the codeProcess the data
const render = it= > {
const children = arr1.filter(item= > item.parent === it.power).map(render)
if (children.length) {
it.children = children
}
return it
}
this.options = arr1.filter(it= > it.parent === '0').map(render)
Copy the code26. Table merge rows
<el-table
:data="data2"
border
stripe
style="width: 100%"
:height="tableHeight"
:header-cell-style="{textAlign: 'center',background:'#eef1f6'}"
:sort-orders="['ascending', 'descending']"
:default-sort="{prop: 'LineSort', order: 'descending'}"
:span-method="objectSpanMethod" // This line is the main one
/>
// Process the same data merge
setTable() {
const spanOneArr = []
const spanTwoArr = []
var concatOne = 0
// Check whether it is the last level
this.tableData.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1)
spanTwoArr.push(1)
} else {
if (item.LineName === this.tableData[index - 1].LineName) { // The same criteria need to be merged
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
}
}
})
return {
one: spanOneArr,
two: spanTwoArr
}
},
/ / merger
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
const _row = (this.setTable(this.tableData).one)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
Copy the code27. Dynamically add a one-line form
<el-dialog :title="showForm ? 'Add' : 'edit '" :visible.sync="addVisible" width="910px" class="dialog-style" :close-on-click-modal="false">
<el-form ref="editForm" :model="editForm" label-width="90px" style="width: 90%">
<el-form-item label="Service Rates" prop="ServiceRate">
<el-input v-model="editForm.ServiceRate" placeholder="0">
<template slot="append">%</template>
</el-input>
</el-form-item>
<el-form-item label="Minimum Service charge" prop="ServiceCharge">
<el-input v-model="editForm.ServiceCharge" placeholder="0">
<template slot="append">yuan</template>
</el-input>
</el-form-item>
<el-form-item label="Loan term" prop="LoanPeriod">
<el-input v-model="editForm.LoanPeriod" placeholder="0">
<template slot="append">months</template>
</el-input>
</el-form-item>
<el-form-item label="Loan rate" prop="lendingRate" style="position: relative">
<el-input v-model="editForm.lendingRate" placeholder="0">
<template slot="append">%</template>
</el-input>
<i class="icon-btn hoverStyle el-icon-circle-plus-outline" @click="addItem" />
</el-form-item>
<! -- Dynamically added form -->
<div v-for="(item, index) in editForm.dynamicItem" :key="index" style="display: inline-flex;">
<el-form-item label="Loan term" :prop="item.LoanPeriod + '_' + index">
<el-input v-model="item.LoanPeriod" placeholder="0">
<template slot="append">months</template>
</el-input>
</el-form-item>
<el-form-item label="Loan rate" :prop="item.lendingRate + '_' + index" style="position: relative; margin-left: 26px;">
<el-input v-model="item.lendingRate" placeholder="0">
<template slot="append">%</template>
</el-input>
<i class="icon-btn hoverStyle el-icon-remove-outline" @click="deleteItem(index, item)" />
<el-button type="text" class="up-btn" :disabled="index === 0" @click="moveUp(index)">Move up</el-button>
<el-button type="text" class="down-btn" :disabled="index === editForm.dynamicItem.length - 1" @click="moveDown(index)">Move down</el-button>
</el-form-item>
</div>
</el-form>
<div class="dialog-footer">
<el-button class="btn-footer" type="primary" @click="addSaveData">Bao deposit</el-button>
<el-button class="btn-footer" @click="closeAddDialog('editForm')">Take away</el-button>
</div>
</el-dialog>
/ / in the methods
// add add one line of form
addItem() {
this.editForm.dynamicItem.push({
RId: 0, // Add 0
BId: 0, // Add 0
LoanPeriod: ", // period number
LendingRate: ", // Loan rate
LoanSort: 0 // Sort by 1
})
},
// Add and delete a form
deleteItem(index, row) {
this.editForm.dynamicItem.splice(index, 1)
},
/ / up
moveUp(index) {
if (index > 0) {
const upDate = this.editForm.dynamicItem[index - 1]
this.editForm.dynamicItem.splice(index - 1, 1)
this.editForm.dynamicItem.splice(index, 0, upDate)
}
},
/ / move down
moveDown(index) {
const downDate = this.editForm.dynamicItem[index + 1]
this.editForm.dynamicItem.splice(index + 1, 1)
this.editForm.dynamicItem.splice(index, 0, downDate)
}
Copy the code28. Modify the Element table scroll bar style
// Modify the table scroll bar
.el-table{
.el-table__fixed,
.el-table__fixed-right {
height: 100% !important;
}
}
// The width of the scroll bar
::-webkit-scrollbar {
width: 10px;
height: 8px;
}
// The slider of the scroll bar
::-webkit-scrollbar-thumb {
background-color: #dedfe0;
border-radius: 3px;
}
Copy the code