Element+vue tips and error resolution (continuous update ~ recommended collection)

   <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center"> </el-table-column>
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{
   
   { scope.row.date }}</template>
          </el-table-column>
        </el-table>

Add align="center" directly to solve

2- The format of the date picker passing the value to the backend is wrong

使用 value-format="yyyy-MM-dd HH:mm:ss"

You can modify the format of the backend in the value-format attribute

 <el-date-picker
                    class="input-box"
                    type="datetime"
                    v-model="ruleForm.birthday"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择出生日期"
                  >
                  </el-date-picker>

3- Get the current row data of the table #default="{row}"

No longer use slot-scope="scope" to get current row data

 <el-table-column fixed="right" label="操作" width="120">
            <template #default="{ row }">
              <el-button
                @click.native.prevent="deleteRow(row.$index, tableData)"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>

4- Clear form data with one click

1. Add ref to bind dom to <el-form ref="formdata" :model="formInline">

2. In <el-form-item prop="time">, add prop, the value of prop is the time attribute of formInline:{time: ""}

3. Give a reset button

<el-form-item>

<el-button type="primary" @click="onSubmit()">清空</el-button>

</el-form-item>

4. Clear form data with one click

onSubmit() {

this.$refs.formData.resetFields()

5. The code is as follows

  <el-form ref="formData" :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="系统模块" prop="xit">
          <el-input
            v-model="formInline.xit"
            placeholder="请输入系统模块"
          ></el-input>
        </el-form-item>
  <el-form-item>
          <el-button type="primary" @click="onSubmit()">清空</el-button>
        </el-form-item>

</el-form>

 onSubmit() {
      this.$refs.formData.resetFields()
    },

6. Arrangement of tables

Requirement: When operating the form, add a gap to the button and the form area

1. If there is an adaptation requirement, you can use el-row and el-col to work with various screens

Here we only show the ones that are not suitable and fixed, as long as there is a gap.

---Add label-width to el-form-item to cooperate with label to realize gap

The label must have a few spaces, otherwise it will not take effect haha

  <el-form-item label-width="100px" label="  ">
          <el-button @click="onSubmit">清空</el-button>
          <el-button type="primary" plain @click="onSubmit">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

7. Regarding the problem that the progress bar is not displayed after the el-table exceeds the content area at certain times

Many times there will be this problem, the solution is to set the width and height for el-table

In this way, no matter what the scene is, as long as it exceeds the content area, the progress bar will be displayed.

   <el-table :data="terminalData" style="width: 100%"   height="calc(100vh - 60px - 61px - 48px - 30px - 56px - 0.35rem - 55px - 85px)">
            <el-table-column prop="date" label="序号" >
            </el-table-column></el-table>

8. The el-button is only used to jump to the routing address and does not pass parameters

usual way of writing

  <el-button @click="toggle()" type="primary" plain
              >切换模式</el-button
            >

 toggle() {
      this.$router.push("/terminalManage/list");
    },

There is another way of writing, which directly includes router-link

 <el-button type="primary" plain
              ><router-link to="/list">切换模式</router-link></el-button
            >

9- Partial plug-in import (joint writing)

Directly import the required plug-ins for the page in components, for example:

components: {
    "full-calendar": require("vue-fullcalendar")
  },

Use, the name corresponds to the attribute name

 <full-calendar
          class="test-fc"
        >
          <template slot="fc-event-card" slot-scope="f" v-if="isshow">
            <p>{
   
   { f.event.title }}</p>
          </template>
</full-calendar>

10. About el-tabs splash screen when switching components

1- Judging by v-if, there will be no splash screen

Adding v-if to each subcomponent solves it

 <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane  label="操作日志" name="first">
          <operate-log v-if="activeName==='first'"></operate-log>
        </el-tab-pane>
        <el-tab-pane label="登录日志" name="second">
          <Loginlog v-if="activeName==='second'" ></Loginlog>
        </el-tab-pane>
      </el-tabs>

11. el-date-picker exceeds the content of the pop-up window

Add style="max-width: 100%;" to el-date-picker to solve it, and it will perform adaptive operation according to the width of the pop-up window

  <el-form-item label="时间" prop="pass" required>
        <!--  style="max-width: 100%;"保证不超出弹窗内容 -->
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="max-width: 100%;"
      >
      </el-date-picker>
    </el-form-item>

12. Use the el-col placeholder to do different screen adaptation problems

The requirement is that the use of different screens is divided into left and right structures, but a space must be reserved in the middle, and multiple el-cols are used to occupy the blank space in the middle, and the positions of different screens are different.

el-col must set style="border:1px solid transparent;" otherwise it will not take effect

  <el-row class="row-header">
          <el-col :xl="5" :lg="8" :md="12">

          </el-col>
          <!-- 纯占位做自适应 -->
          <el-col
            style="border:1px solid transparent;"
            :xl="12"
            :lg="6"
            :md="1"
          ></el-col>
          <el-col :xl="6" :lg="10" :md="10">

          </el-col>
        </el-row>

13. Scss penetration failure problem in vue3

I have tried all three on the Internet, and reported an error when I wrote it, and changed it according to the prompts. Only this can take effect without reporting an error

::v-deep(.el-card__body){
    height: 100%;
    padding: 0px 30px;
    @extend %flex-between;
}

14. By default, the first row of el-table is highlighted and selected

Bind ref to el-tabel

  <el-table
            ref="terminalList"//记得绑定
            :data="userTableData"
            tooltip-effect="dark"//表格超出后会...显示之后鼠标滑上去会显示内容
            style="width: 100%"
            height="calc(100vh - 30px - 61px - 48px - 30px - 56px - 0.35rem - 55px - 85px)"
            @row-click="userRowClick"//点击当前行后触发
            :highlight-current-row="true"//高亮当前行
            :show-header="false"//不展示表头
            class="user-table-div"
          >

After obtaining the table data, highlight it. The writing method is free. Here is my own packaging method. As long as the table data can be obtained, it is mainly to see this.$nextTick

   async queryList(){
      const res=await EquipmentList({
        page:this.page,
        size:this.size
      })

      if(res.code==200){
        this.totalCount=res.total;
        let {data}=res
        this.userTableData=data
//默认高亮第一行，this.$nextTick可以当做是定时任务，在有数据后才执行
        this.$nextTick(()=>{
          this.$refs.terminalList.setCurrentRow(this.terminalList[0])
        })
        console.log(this.userTableData,'设备列表数据');
      }
    },

15. Regarding the dislocation of content after using fixed in el-table

In the operation of a column, fixed="right", you need to specify the width width

The column adjacent to the operation column does not add width, and the other columns specify the width

16. There are too many values in the el-table form, so stop using ternary expressions

Usage scenario: If the backend requires the el-table form to pass values, you make a judgment whether you will write like this

Error demonstration: infinitely nested ternary expressions, not impossible, not conducive to reading

<el-table-column
        prop="DataType"
        label="流量类型"
        width="180">
        <template #default="{row}">
        <span>{
   
   { row.DataType=='singlecard'?'单卡通用流量':row.DataType=='directionalcard'?'单卡定向流量':row.DataType=='sameflowcard'?'同档位池共享流量':row.DataType=='directional sameflowcard'?'同档位池共享定向流量':row.DataType=='unityPayPool'?'统付池通用流量':row.DataType=='GREcard'?'统付池定向流量':'--'}}</span>
        </template>
      </el-table-column>

Demonstrate correctly

        <el-table-column prop="DataType" label="流量类型" width="180">
          <template #default="{ row }">
            <span>{
   
   { dataTypes[row.DataType] || "--" }}</span>
          </template>
        </el-table-column>



data(){
return{
  dataTypes: {
        singlecard: "单卡通用流量",
        directionalcard: "单卡定向流量",
        sameflowcard: "同档位池共享流量",
        directional_sameflowcard: "同档位池共享定向流量",
        unityPayPool: "统付池通用流量",
        GREcard: "统付池定向流量",
      },
}}

17. el-form removes the * sign required for form verification

:hide-required-asterisk="true", plus this, there will be no * in front of the label

  <el-form
        ref="inclinometerForm"
        :model="inclinometerForm"
        :rules="rules"
        :hide-required-asterisk="true"
      >

18. el-form-item, change the font of the label

/deep/ .el-form--inline .el-form-item__label {
  font-weight: bold;
  color: #000;
}

Effect: the font becomes thicker

19. el-select displays a certain data of el-option by default

In this way, el-select will display the lable value by default: value 2

 <el-form-item label="三方：">
          <el-select v-model="selectValue">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

options: [
        {
          value: 1,
          label: "值1"
        },
        {
          value: 2,
          label: "值2"
        },
        {
          value: 3,
          label: "值3"
        }
      ],
selectValue:2

20. el-dialog title custom content, you can add buttons to the title, etc.

Just write a built-in slot title

 <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
                <div slot="title" class="dialog-title">
                    <span class="dialog-title-text">外部弹窗</span>
                    <el-button type="primary">按钮</el-button>
                </div>
</el-diglog>

effect, you can customize the style