Element UI常用部分组件简要介绍一

安装Element UI

首先，你需要在你的项目中安装Element UI。可以通过npm或者yarn进行安装。打开终端并运行以下命令：

npm install element-ui
# 或者
yarn add element-ui

引入Element UI

要使用Element UI，你需要在你的Vue.js项目中引入它。你可以在main.js（或者其他入口文件）中添加以下代码：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

使用Element UI组件

  

 

Form表单

<template>
  <div>
    <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age"></el-input>
      </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 {
      formData: {
        name: '',
        age: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交表单数据
          console.log('Form submitted:', this.formData);
        } else {
          // 表单验证不通过，提示错误信息
          console.log('Form validation failed');
        }
      });
    },
    // ...
  }
}
</script>

 

在这个例子中，我们使用el-form组件来创建一个表单。我们通过props将formData传递给el-form作为表单数据的绑定对象。通过el-form-item组件，我们定义了表单的项，包括姓名和年龄。我们使用v-model指令将输入框的值与formData中对应的属性进行双向绑定。

我们还定义了formRules对象来指定表单项的验证规则。在提交表单时，我们使用this.$refs.form.validate()方法对表单进行验证，如果验证通过，则可以提交表单数据。

 Tbale表格

<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
    >
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 25,
          email: 'zhangsan@example.com'
        },
        {
          name: '李四',
          age: 30,
          email: 'lisi@example.com'
        },
        // ...
      ]
    };
  },
  // ...
}
</script>

在这个例子中，我们使用el-table组件来展示一个简单的表格。我们通过props将tableData传递给el-table作为表格的数据源。通过el-table-column组件，我们定义了表格的列，并使用prop属性指定对应数据源中的属性。

border属性用于显示表格边框，stripe属性用于显示交替的行背景色。

Tree树型控件基础用法

       <el-tree
          node-key="id"    //每个树节点用来作为唯一标识的属性
          :data="depList"   //  展示数据
          :props="defaultProps"   //配置项
          default-expand-all  //	是否默认展开所有节点
          :expand-on-click-node="false" //是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
          highlight-current   //是否高亮当前选中节点，默认值是 false。
          @current-change="selectNode"    //当前选中节点变化时触发的事件   
        />
data(){
    return{
     defaultProps: {
          children: 'children', //指定子树为节点对象的某个属性值
          label: 'label' //指定节点标签为节点对象的某个属性值
        }
    }
}

// setCheckedKeys(key) 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性

在这个例子中，我们使用了el-tree组件来创建一个基本的树型结构,props传递了deptList数据源,

还使用defaultProps来指定数据源中的属性名称,以便正确地渲染树节点的标签和子节点.

Button组件

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
    <el-button>默认按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

在这个例子中，我们使用了el-button组件来创建几个不同样式的按钮。type属性用于设置按钮的样式，包括主要按钮、默认按钮、成功按钮等等

总结

在本篇博客中，简要介绍了如何快速入门并使用Element UI。我们学习了如何安装Element UI、引入Element UI并开始使用它的部分组件.

Element UI提供了丰富的组件和工具，可以帮助你快速构建漂亮的Web界面。如果你想了解更多关于Element UI的信息，可以查阅官方文档，里面有更详细的组件使用说明和示例。

后续会继续更新,希望本文对你有所帮助，祝你在使用Element UI时顺利进行！如果你有任何问题，欢迎在下方留言。谢谢阅读！