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指令，我们可以方便的获取选取框中选中的值。