elementui关于表单的一些基本操作

1.select选中传多值；
2.select禁用项设置；
3.简单粗暴的表单校验。

select选中传多值 ↓

            <el-select
              v-model="form.userName"
              placeholder="请选择用户名称"
              clearable
              filterable
              value-key="code"
            >
              <el-option
                v-for="item in userList"
                :key="item.userCode"
                :label="item.userName"
                :value="{code: item.userCode, name: item.userName }"
              ></el-option>
            </el-select>

select禁用项设置 ↓

        <el-select
          v-model="form.xxxx"
        >
          <el-option
            v-for="item in stateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>

<script>
export default {
  data() {
    return {
      originalStateList: [
        {
          label: "哈哈哈哈1",
          value: 1,
        },
        {
          label: "嘻嘻嘻嘻2",
          value: 2,
        },
        {
          label: "咯咯咯3",
          value: 3,
        },
      ],
      stateList: [],
    }
  },
  methods: {
    init() {
      this.form.xxxx = "嘻嘻嘻嘻2";
      // es6语法：解构赋值
      this.stateList = [...this.originalStateList];
      let idx = null;
      this.originalStateList.map((item, index) => {
        if (item.label == this.form.xxxx) {
          idx = index;
        }
      });
      this.stateList.map((item, index) => {
        if (index < idx) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });
    }
  }
}
</script>

简单的表单校验 👇

1. utils.js ↓

import {Message} from "element-ui";

/**
 * requiredArr为必填项值的数组;tipsArr为必填项对应的提示名称
 * @param {Array} requiredArr 
 * @param {Array} tipsArr 
 * @returns {Boolean}
 */
export function checkRequired(requiredArr, tipsArr) {
    let idx;
    requiredArr.map((item, index) => {
        if (!item) {
            idx = index + 1;
        }
    });
    if (idx) {
        Message(`请填写${tipsArr[idx - 1]}`);
        return false;
    }
    return true;
}

2.页面中 ↓

    submitForm() {
      delete this.form.xxxx;

      let requiredArr = [
        this.form.hhhh,
        this.form.startTime,
        this.form.endTime,
      ];
      let tipsArr = ["哈哈", "开始时间", "结束时间"];
      if (checkRequired(requiredArr, tipsArr)) {
        this.$emit("sendMessage", this.form);
      }
    },

写一百遍了也没记住。。。。
啊朋友再见