代码与效果展示

css样式

// 另起一个style标签, 加上scoped
<style scoped>
.el-form-item__label {
  display: inline;
  text-wrap: nowrap;
  text-align-last: justify; //主要是这行起到两端对齐的作用
}
// 必填属性的*是label的伪元素, 在两端对齐时会占用label的空间, 这里把默认的label中的*去掉
.el-form-item.is-required .el-form-item__label:before {
  content: none !important;
}
// 把*加在.el-form-item中就不会占用空间了
.el-form-item.is-required::before {
  content: '*';
  color: red;
}
// 为了保持对齐, 给非必填的也加一个不可见的*
.el-form-item:not(.is-required)::before {
  content: '*';
  visibility: hidden;
}
</style>

效果

text-align-last属性兼容性问题以及解决办法

这个属性可能存在兼容性问题, 详见：text-align-last - CSS：层叠样式表 | MDN (mozilla.org)

text-align-last是对文本最后一行设置对齐方式, 除此之外, 我们可以使用text-align对多行文本设置对齐方式, 不过这个属性对最后一行不生效, 而el-form的label一般只有一行, 直接设置.el-form-item__label { text-align: justify; }是不会使得label两端对齐的, 此时可以通过添加伪元素使要显示的内容不是最后一行, 两端对齐的效果就生效了:

完整代码:

<style scoped>
.el-form-item label:after {
  content: ' ';
  display: inline-block;
  width: 100%;
}
.el-form-item__label {
  display: inline;
  text-wrap: nowrap;
  text-align: justify;
}
.el-form-item.is-required .el-form-item__label:before {
  content: none !important;
}
.el-form-item.is-required::before {
  content: '*';
  color: red;
}
.el-form-item:not(.is-required)::before {
  content: '*';
  visibility: hidden;
}
</style>