1. Vue changes the style of element-UI el-table, such as header font color and background color, and TR font color and background color

<el-table :data="tableData" :row-style="tableRowStyle" :header-cell-style="tableHeaderColor"> <el-table-column Property ="name" label=" name" width="120"> </el-table-column> <el-table-column property="age" label=" age" width="120"> </el-table-column> <el-table-column property="sex" label=" sex" width="120"> </el-table-column> </el-table> </template>Copy the code
Export default {name: 'table', data() {return {tableData: [{name: 'Cindy', age: 20, sex: 'female'}, {name: 'Mila, age: 22, sex:' female '}, {name: "Bob", the age: 23, sex: 'male'}]}}, created () {}, the methods: {// Change table tr's background color tableRowStyle({row, rowIndex}) {return 'background-color: Pink '}, // Change the background color of the table header tableHeaderColor({row, column, rowIndex, columnIndex }) { if (rowIndex === 0) { return 'background-color: lightblue; color: #fff; font-weight: 500; ' } } } } </script>Copy the code

As shown in figure

The dialog box of the elementUI component does not close when clicked

Use the attributes provided by the official documentation: close-on-click-modal Note: Modal refers to the mask layer!! The mask layer can be turned off by default, just set to false.

Element-ui trampling record DatePicker DatePicker cleared an error

[Vue WARN]: Error in V-ON Handler: “TypeError: Cannot read property ‘0’ of NULL”

<el-date-picker V-model ="value" type=" dateTimerange ":clearable="true" range-separator=" to" start-placeholder=" start date" End-placeholder =" yyyY-MM-DD HH: MM :ss"> </el-date-picker>Copy the code
data(){
  return {
      value:[]
  }
}
Copy the code

As is shown in

Value is an empty array until the date range is selected. After selecting a date, print value:

When you click the clear button and output value again, you will find this error message:

The reason for this is that value is set to NULL when the clear button is clicked. There is no built-in clear button callback in element-UI. So to fix this bug, I use the method of reassigning value before the next call, i.e. :

if (! this.value) { this.value = [] }Copy the code

Or we can judge when we value, that is:

this.searchForm.startTime = this.value ? this.value[0] || '' : '';
this.searchForm.endTime = this.value ? this.value[1] || '' : '';
Copy the code

Element UI Table does not display problems in IE

Set styles in app.vue

.el-table { -ms-flex: none ! important; flex: none ! important; height: max-content; }Copy the code

The Layout of element UI Container is displayed incorrectly in Internet Explorer

The el-Container tag can only exist one cannot wrap the el-Container with a div and set the width otherwise the content will not be displayed

Vue style penetration issues

>>> If the vue style uses CSS, then

<style lang="css" scoped>
.a >>> .b { 
 /* ... */ 
}
</style>
Copy the code

But preprocessors like SCSS can’t parse >>>, so we use the following method.

/deep/

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */ 
 }
} 
</style>
Copy the code

But some developers are responding in thevue-cli3At compile time, the deep mode will report an error or warning. At this point we can use a third approach

:: V-deep must be a double colon

<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */ 
 }
} 
</style>
Copy the code

Vue rendering does not show images

Img: require('@/assets/11.png'),},Copy the code

Date and point in time formats for element-UI

Date-time format: The correct time format may be displayed, but the value of the model obtained at the end is not displayed.Copy the code
For example, display year, month, day, hour, minute, second. But the backend only needs years, months and days. In this case, value-format and format value-format are used to bind the format of the value, that is, the format property of the data format that the back-end interface requires us to pass, which controls the format of the display. Value -format=" YYYY "Year value-format=" YYYY-MM-DD" year month day value-format=" YYYY-MM-DD HH: MM: SS "Year month day time minute secondCopy the code