体检管理系统——ElementUI

最新推荐文章于 2024-09-02 10:05:14 发布

原创最新推荐文章于 2024-09-02 10:05:14 发布 · 721 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

技术使用总结专栏收录该内容

102 篇文章

订阅专栏

本文介绍Element UI框架中的Table表格组件、分页、警告和表单功能，详细解析了表单校验规则的设定及使用，包括如何通过ref属性进行表单引用，实现数据的双向绑定和动态交互。同时，展示了如何使用确认框进行警告提示和操作确认。

官网地址：http://element-cn.eleme.io/#/zh-CN

Table 表格
在这里插入图片描述

在这里插入图片描述

分页
在这里插入图片描述
警告

表单校验
在这里插入图片描述
ref 是表单校验的引用，通过$refs[‘form’] 引用上面的表单。
：model 代表表单中的数据和data中的form 数据进行动态交互修改数据双向绑定
：rules 代表表单校验的规则表单校验的规则写到data中

可以通过form.xxx引用data中form的数据，信息双向绑定，进行交互

表单校验的规则

在这里插入图片描述
确认框：

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>