Tag Archives: Element-UI

[Solved] el-date-picker Error: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

Error Messages:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “placement”
Reason: Version issue
Solution:
1. Downgrade the version.
2. Add align=”center” in el-date-picker.

<el-date-picker
          :v-model="time"
          type="daterange"
          range-separator="to"
          start-placeholder="Start Date"
          end-placeholder="End date"
        >
</el-date-picker>

[Solved] Error in mounted hook: “Error: please transfer a valid prop

I’m writing today_ This error is encountered during the item loop, and it is recorded; I probably wrote this to test a page

then the form loop will be used,
at the beginning, it is in form_ It was written directly in item. Finally, when I reset the form, I found that I couldn’t reset it. Then I added a layer of form item to El input. I also inquired about the relevant errors on the Internet and found that they were generally: prop = “‘item. ‘+ index +’. Index2 ‘” and so on, but my problem was not solved. The error was still reported, and the form still couldn’t be reset
consider it slowly at this time. In fact, it is an array loop. Then we will get the accurate value to eliminate this error

<el-form-item
        v-for="(order_award, index) in form.award_config.order_award
          .order_award_list"
        label-width="10"
        style="margin-bottom: 0"
        prop="order_award"
        :key="index"
      >
        <div>
          <el-row :gutter="12" type="flex">
            <el-col :span="4" v-if="!(form.award_config.award_type == 1)">
              <el-form-item label-width="0" :prop="'award_config.order_award.order_award_list['+index+'].order_count'">
                <el-card shadow="never" class="reward_content_card">
                <span
                  class="input_unit"
                  style="margin-right: 5px; font-size: 14px"
                  >Done</span
                ><br />
                <span class="input_unit"></span>
                <el-input
                  class="reward_content_padding reward_content_input"
                  v-model="order_award.order_count"
                >
                </el-input>
                <div class="input_unit"></div>
              </el-card>
              </el-form-item>
            </el-col>
          </el-row>
       </el-form-item>

Mainly this code

:prop="'award_config.order_award.order_award_list['+index+'].order_count'"

Take the detailed value location to solve the error.

Element Error when await is used in UI form submission [Solved]

Correct writing: use async before valid

/**Submit*/
        handleSubmit() {
            this.$refs["form"].validate(async valid => {
                if (valid) {
                    await this.handleUploadFile();
                }
                ApiUpdateOrganBrand(this.form).then(res => {
                    console.log(res);
                    this.$message.success("Brand configuration success");
                    this.handleClose();
                });
            });
        },

I started by writing async in front of handle submit, reporting the unexpected reserved word ‘await’

(element UI component table) how to add a style to a table

when using the Element UI to design a table, the style of the table might look something like this, if not specially decorated, but sometimes we need to add some style.

check the official documentation and we find the following properties. The style is controlled by the classification of row, cell, header-row and header-cell.

0

2

3

4

6

0

0

0

0

0

0

0

parameter description type optional value 1 default value
5 row-class-name 7 row className callback method, can also use a string to set a fixed className for all rows. Function({row, rowIndex})/String / /
row-style 1 row style callback method, also can use a fixed Object to set the same style for all rows. Function({row, rowIndex})/Object / /
cell-class-name 1 cell className callback method. Td>

Function({row, column, rowIndex, columnIndex})/String / /
cell-style 1 cell style callback method, can also use a fixed Object to set the same style for all cells. Td>

Function({row, column, rowIndex, columnIndex})/Object / /
header-row-class-name 1 header rows can also be set to a fixed className using a string. Function({row, rowIndex})/String / /
header-row-style 1 style callback method. Function({row, rowIndex})/Object / /
header-cell-class-name 1 Td>

Function({row, column, rowIndex, columnIndex})/String / /
header-cell-style 1 header cell style callback method, can also use a fixed Object to set the same style for all header cells. Function({row, column, rowIndex, columnIndex})/Object / /

add a black background to the table below, with white text darkening

adds the cell-style and header-cell-style properties to el-table and passes in the function, which is the same because the table header and table data are styled the same. 

<el-table :cell-style="cellStyle" :header-cell-style="cellStyle">

Below

is the function body 

cellStyle() {
    return {
        background: "#000000",
        color: "#ffffff",
    };
},