Element-UI基本使用

Posted 奥特曼　

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Element-UI基本使用相关的知识，希望对你有一定的参考价值。

目录

一、使用

二、了解组件

1.表格

2.翻页组件-pagination

3. Form表单

4. Tree树形组件

         5.Dialog对话框组件 

官方地址：https://element.eleme.cn/#/zh-CN

ElementPlus(适配Vue3.0的版本)官方地址： https://element-plus.org/#/zh-CN

一、使用

1.下载

npm i element-ui -S

-S生产依赖包，表示项目上线也需要使用(默认可不写)     开发依赖 -D

2.全局导入  main.js

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

Vue.use(ElementUI);

3.测试使用

  <el-button type="success">成功按钮</el-button>

二、了解组件

1.表格

 <template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作">
        <!-- slot-scope 固定写法  scope随便起的变量名 -->
        <template slot-scope="scope">
          {{ getGender(scope.row.gender) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

  <script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        gender: 0
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        gender: 0

      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        gender: 1
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: 1
      }]
    }
  },
  methods: {
    getGender (gender) {
      return gender === 0 ? '男' : '女'
    }
  },
}
  </script>

数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）

  1. 行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。

  2. 列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握

    • label：决定当前列显示出的标题

    • prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名

    prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。

    • width: 用来设置列的宽度。如果不设置，它会自适应。

我们可以在列里进行使用插槽     作用域插槽slot-scope="scope"   v-slot="scope"

 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

 

2.翻页组件-pagination

<template>
  <div>
    <!-- total	总条目数  page-size	每页显示条目个数，支持 .sync 修饰符 -->
    <el-pagination
      @current-change="btn"
      background
      layout="prev, pager, next"
      :total="100"
      :page-size="5"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    // 他有一个默认参数 当前页码
    btn (curPag) {
      console.log(curPag)
    }
  },
}

layout中的关键字有自己的含义； prev 上一页 pager 每页 next下一页  :total总数量 :page-size="5"  每页显示几条 

@current-change(curPag)   默认参数 当前页码

3. Form表单

<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机号" prop="phone" size="mini">
        <el-input
          type="password"
          v-model="ruleForm.phone"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" size="mini">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import '../assets/style/index.css'
export default {
  name: 'Login',
  data () {
    return {
      ruleForm: {
        phone: '',
        password: '',
      },
      rules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3,4,5,6,7,8]\\d{9}$/, message: '不允许输入空格等特殊符号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' },
          {//自定义效验规则
            validator: function (rule, value, callback) {
              if (value === '123456') {
                callback(new Error('密码过于简单'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log('成功')
          this.$router.push('/')
        } else {
          console.log('失败')
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style  scoped>
.login {
  width: 330px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.el-input--mini /deep/ .el-input__inner {
  width: 200px;
}
</style>

给form绑定 :model 验证data数据中的对象名， 绑定rules 校验的规则

Form-Item 绑定prop属性 为校验的规则里的对象

定义的rules

不同的UI框架不同的验证方式

  { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }

自定义校验规则  callback()必须写 如果不写不通过

 {
            validator: function (rule, value, callback) {
              if (value === '123456') {
                callback(new Error('密码过于简单'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }

步骤

1.定义验证规则 按(element-ui的要求来)

2.配置模板 应用规则

   给表单设置rules属性传入验证规则

   给表单设置model属性传入表单

  给表单中的元素(Form-Item) 设置prop 设置需要效验的字段名

3.手动兜底校验： 正则只是为了标红 ，同样可以点击触发事件 所以我们要进行兜底校验

submitForm () {
      this.$refs.ruleForm.validate(valid => {  //ruleForm 给表单设置ref
        if (valid) {
    // valid 就是表单验证的结果，如果是true，表示通过了
          console.log('成功')
          this.$router.push('/')
        } else {
          console.log('失败')
        }
      })
    },

4. Tree树形组件

<template>
  <div>
    <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {

      data: [{
        label: '项目经理 张大大',
        children: [{
          label: '产品leader-小亮',
          children: [{
            label: '产品-小丽'
          }, {
            label: '产品-大光'
          }]
        },
        {
          label: 'UIleader-小美',
          children: [{
            label: 'ui-小高'
          }]
        },
        {
          label: '技术leader-老马',
          children: [{
            label: '前端-小刘'
          }, {
            label: '前端-小华'
          }, {
            label: '后端-小李'
          }]
        },
        {
          label: '测试leader-老王',
          children: [{
            label: '测试-小赵'
          }, {
            label: '测试-小强'
          }]
        },
        {
          label: '运维leader-老李',
          children: [{
            label: '运维-小涛'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  },

};
</script>

数据项中label和children是关键字，不可随意改动。tree组件用它们来显示内容

如果你非要去自定义这个两个关键字：label和children的话，就需要用到props属性了。

defaultProps:{
    label:'name',
    children:'childList'
}

当我们点击某个树形子节点

<template>
  <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
</template>

<script>
  export default {
     methods:{
       // 共三个参数，
       // 依次为：
       //   - 传递给 data 属性的数组中该节点所对应的对象
       //   - 节点对应的 Node
       //   - 节点组件本身
        handleNodeClick(a,b,c){
          console.log(a,b,c)
        }
      }
  }
</script>

但是实际场景 后端给我们返回的数据可能是这样的

如何转换呢？  链接

5.Dialog对话框组件 

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleClose (done) {
      this.dialogVisible = false
      console.log(done)
    }
  }
}
</script>

默认四个地方可以关闭 

1. 弹出层外面 

2. esc 

3. ×号

4.确定取消 

显然 前两个并不是我们想要的 我们可以看文档进行关闭这两个操作

 <el-dialog
      :close-on-press-escape="false"  //面板
      :close-on-click-modal="false"  //esc
      width="30%"
      :before-close="handleClose"
    >

 

遇到问题如何解决？

  1. 去官网 底端找常见问题/社区 
  2. 向组件的作者提问 跳转
  3. 修改源码

以上是关于Element-UI基本使用的主要内容，如果未能解决你的问题，请参考以下文章

Element-UI基本使用

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

如何上传图片到七牛云

Element-UI 的基本使用（基于 Vue 的 组件库）

Element-UI使用基本介绍

Element-ui的使用（二）：Form表单（基本效验）