Use el-form in Vue to center the content of the table header with a red asterisk for required fields.

---

Preface:
The el-form form of element provides a style to display the red asterisk next to the label of the required field, but this style conflicts with the centered display of the title text. The two cannot coexist. I studied the writing method of element and figured it out myself. I came up with a style that can center the text and have a red asterisk.

---

1. Case

Put the comparison picture first

---

1. This is the style without asterisks

---

2. This is the red asterisk next to the label of the required field that comes with element-form. It can be clearly seen that the text has been squeezed to the right.

---

3. This is a style that I researched with the text centered and a red asterisk.

2. Usage steps

1. Import the library

Introduce the ElementUI component into main.js:

import ElementUI from 'element-ui'
Vue.use(ElementUI)

2. Use el-form

Use el-form in code that requires a form. The code is as follows (example):

---

template data

<template>
  <div class="elForm">
  	<!-- hide-required-asterisk 用来隐藏必填字段的标签旁边的红色星号 -->
    <el-form ref="form" :model="form" label-width="70px" :hide-required-asterisk="true">
       <el-form-item lang="zh" label="姓名"
                     :rules="[ { required: true, message: '请输入姓名', trigger: 'blur' },]">
         <!-- 自己写的红色星号样式 -->
         <span class="IsMust">*</span>
         <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
       </el-form-item>
       <!-- 用来对比的样式 -->
       <el-form-item lang="zh" label="姓名">
         <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
       </el-form-item>
       <el-form-item lang="zh" label="曾用名">
         <el-input v-model="form.name" placeholder="请输入曾用名"></el-input>
       </el-form-item>
     </el-form>
  </div>
</template>

---

script data

<script>

export default {
    
    
  data() {
    
    
    return {
    
    
    	form: {
    
    } // 表单绑定的数据
    }
  },
  methods:{
    
    
  },
}
</script>

---

content of style

<style lang="scss" scoped>

.elForm{
    
    
  display: flex;
  justify-content: center;
  .IsMust{
    
    
    position: absolute;
    color: #F56C6C;
    // 位置可以根据自己的样式自行调整
    top: 6px;
    left: -83px;
  }
  .el-form{
    
    
    width: 400px;
    .el-input{
    
    
      width: 200px;
    }
    ::v-deep .el-input__inner{
    
    
      width: 200px;
    }
  	.el-form-item{
    
    
  	  position: relative;
  	}
  	::v-deep .el-form-item__label{
    
    
      text-align-last: justify; // 文字左右散开居中
      text-align: justify;
      text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
      margin-right: 34px;
      padding: 0;
      font-size: 16px;
      line-height: 49px;
      font-weight: 400;
      color: #353E4C;
    }
    ::v-deep .el-form-item__content{
    
    
      line-height: 50px;
    }
  }
}

</style>

---

Summarize

1. First add rules to the form items to make the current parameters required.
2. Then modify the hide-required-asterisk attribute of the form to hide the red asterisk next to the label of the original required field.
3. Add a red one yourself Asterisk style, and then use the position attribute to give an absolute position