关于element-ui:ElementUI-奇淫技巧第二弹提升开发效率延长摸鱼时间

主题款式批改

已经为了批改组件格调，一个我的项目用了上百个款式穿透，起初才发现定制一个主题就够了！

第一步，在官网的主题页面，批改背景色、字体色彩及边框色彩

第二步，下载主题

第三步，用下载的 css 文件替换掉默认的 css 文件

成果如下：

el-backtop 回到顶部组件

有时候页面很长，咱们须要一个回到顶部的按钮，举荐大家应用 el-backtop，自带过渡成果。

代码如下：

<template>
  <div class="container">
    <div class="box">Scroll down to see the bottom-right button.</div>
    <el-backtop target=".container">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow-x: hidden;
  .box {
    padding: 20px;
    height: 1500px;
  }
}
</style>

留神：须要将 body 的 margin 设置为 0，不然会呈现两个滚动条。

el-form-item label 宽度自适应

通常咱们是给 label 设置一个固定宽度，但这齐全限度了 UI 的施展，如何让 label 宽度自适应呢？答案是给控件设置一个固定宽度。

代码如下：

<template>
  <el-form>
    <el-form-item label="老师">
      <el-input v-model="form.teacher" style="width: 625px;"></el-input>
    </el-form-item>
    <el-form-item label="请抉择在线教学平台名称">
      <el-select v-model="form.platform" style="width: 500px;">
        <el-option label="平台一" value="1"></el-option>
        <el-option label="平台二" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {data() {
    return {
      form: {
        teacher: '',
        platform: ''
      }
    }
  }
}
</script>

el-form-item 循环校验

有时候表单项是一个循环的列表，须要对每一项进行校验。

代码如下：

<template>
  <div>
    <el-form :model="form" label-width="100px" ref="form">
      <el-form-item
        v-for="(item, index) in form.list"
        :key="index"
        :label="'评估我的项目' + (index + 1)":prop="'list.'+ index +'.evaluateName'":rules="rules.evaluateName"
      >
        <el-input v-model="item.evaluateName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {data() {
    return {
      form: {
        list: [
          {evaluateName: ''},
          {evaluateName: ''},
          {evaluateName: ''}
        ]
      },
      rules: {
        evaluateName: [
          {
            required: true,
            message: '请输出评估我的项目',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {submitForm() {
      this.$refs.form.validate(valid => {if (valid) {alert('submit!')
        } else {console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

el-form-item 表单嵌套表格校验

如果在表单里嵌套表格，那么如何对表格外面的控件进行校验呢？

代码如下：

<template>
  <el-form :model="form" ref="form">
    <el-table border :data="form.list" style="margin-bottom: 10px;">
      <el-table-column
        label="评估我的项目"
        prop="evaluateName"
        align="center"
      ></el-table-column>
      <el-table-column label="评估等级" align="center">
        <template slot-scope="scope">
          <el-form-item
            :prop="'list.' + scope.$index + '.evaluateLevel'"
            :rules="rules.evaluateLevel"
            class="evaluate-level"
          >
            <el-radio-group class="radio-group" v-model="scope.row.evaluateLevel">
              <el-radio
                v-for="evaluationItem in evaluateOptions"
                :key="evaluationItem.value"
                :label="evaluationItem.value"
              >
                {{evaluationItem.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item>
      <el-button type="primary" class="submit-btn" @click="submitOpinionCheck">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {data() {
    return {
      form: {
        list: [
          {
            id: '01',
            evaluateName: '指标一',
            evaluateLevel: ''
          },
          {
            id: '02',
            evaluateName: '指标二',
            evaluateLevel: ''
          },
          {
            id: '03',
            evaluateName: '指标二',
            evaluateLevel: ''
          }
        ]
      },
      evaluateOptions: [
        {
          value: '1',
          label: '优'
        },
        {
          value: '2',
          label: '良'
        },
        {
          value: '3',
          label: '中'
        },
        {
          value: '4',
          label: '差'
        }
      ],
      rules: {evaluateLevel: [{ required: true, message: '请抉择评估等级', trigger: 'change'}]
      }
    }
  },
  methods: {submitOpinionCheck() {
      this.$refs.form.validate(valid => {if (valid) {alert('submit!')
        } else {console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluate-level {
  ::v-deep .el-form-item__error {
    width: 100px;
    /* 使校验信息居中 */
    left: calc(50% - 50px);
  }
}
</style>

el-form-item 表单校验 label 只保留 *

有时候咱们只须要表单校验的 *，而不须要 lable 文字，像这样：

代码如下：

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px">
    <el-form-item label="" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输出流动名称"></el-input>
    </el-form-item>
    <el-form-item label="" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请抉择流动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"> 提交 </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {name: [{ required: true, message: '请输出流动名称', trigger: 'blur'}],
        region: [{required: true, message: '请抉择流动区域', trigger: 'change'}]
      }
    }
  },
  methods: {submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {alert('submit!')
        } else {console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

el-select 下拉框款式批改

应用款式穿透批改下拉框款式，你会发现打死都不失效，那是因为下拉框是默认挂载在 body 上面。解决办法：设置 :popper-append-to-body="false"

代码如下：

<template>
  <el-form>
    <el-form-item label="流动区域">
      <el-select
        class="form-select"
        :popper-append-to-body="false"
        v-model="form.region"
        placeholder="请抉择流动区域"
      >
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {data() {
    return {
      form: {region: ''}
    }
  }
}
</script>

<style lang="scss" scoped>
.form-select {
  ::v-deep .el-select-dropdown__item.selected {background: pink;}
}
</style>

el-input 关上弹框 主动聚焦

很多时候 form 表单是嵌套在 dialog 上面，为了进步用户体验，须要在关上弹框后 input 框主动聚焦。

代码如下：

<template>
  <div>
    <el-button type="text" @click="showDialog">
      关上嵌套表单的 Dialog
    </el-button>

    <el-dialog title="流动" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="流动名称" label-width="80px">
          <el-input ref="nameInput" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="流动内容" label-width="80px">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取 消 </el-button>
        <el-button type="primary" @click="dialogVisible = false"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        content: ''
      }
    }
  },
  methods: {showDialog() {
      this.dialogVisible = true
      // 如果弹框显示，则主动聚焦
      this.$nextTick(() => {this.$refs.nameInput.focus()
      })
    }
  }
}
</script>

明天的分享就到到这里，心愿对你有所帮忙！如果感觉有用，不要忘了点个赞呦~

据说喜爱点赞的你，往年年终奖拿到手软😍