Vue3ElementUI全面介紹

一、Vue3ElementUI列表分頁

//Pagination.vue
<template>
  <div>
    <el-pagination
      background
      layout="total,prev,pager,next,jumper"
      :total="total"
      :page-size="pageSize"
      :page-count="pageCount"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: "Pagination",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
    };
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize);
    },
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`當前頁: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

Vue3ElementUI提供了列表分頁的組件，使我們可以方便的實現列表分頁功能。在組件中，我們可以自定義頁碼、每頁數據量等參數。通過計算屬性，我們可以方便的獲取總頁數，並通過current-change事件，監聽當前頁碼的變化進行相應操作。

二、Vue3ElementUI表格校驗

//FormValidate.vue
<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      :rules="rules"
      :inline="inline"
    >
      <el-form-item
        :label="type === 'username' ? '用戶名' : '郵箱'"
        prop="username"
      >
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "FormValidate",
  data() {
    return {
      inline: true,
      form: {
        username: "",
        password: "",
      },
      type: "username",
      rules: {
        username: [
          { required: true, message: "請輸入用戶名", trigger: "blur" },
          { min: 3, max: 15, message: "長度在 3 到 15 個字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "請輸入密碼", trigger: "blur" },
          { min: 6, max: 20, message: "長度在 6 到 20 個字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("表單驗證通過");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

Vue3ElementUI提供了表單校驗的組件，使我們可以方便的實現表單數據的校驗。我們只需要設置rules屬性，即可對錶單中的數據進行校驗。同時，可以通過validate()函數，進行表單數據的校驗，驗證成功後進一步操作，否則輸出相關錯誤信息。

三、Vue3ElementUI選取框

//SelectBox.vue
<template>
  <div>
    <el-select v-model="value" placeholder="請選擇">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "SelectBox",
  data() {
    return {
      value: "",
      options: [
        {
          value: "java",
          label: "Java",
        },
        {
          value: "python",
          label: "Python",
        },
        {
          value: "javascript",
          label: "JavaScript",
        },
        {
          value: "go",
          label: "GO",
        },
      ],
    };
  },
  methods: {},
};
</script>

Vue3ElementUI提供了多種選取框的組件，包括下拉框、級聯選擇器、多選框等。我們只需要在模板中引入el-select組件，並在組件的選項中設置相應的值和名稱參數，即可完成選取框的設計。同時通過在組件中使用v-model指令，我們可以方便的獲取選取框中選中的值。