element-UI的基本使用以及部分组件的使用

1.element基本使用

官网:(https://element.eleme.cn/#/zh-CN)

1.1安装

在项目中晚装elementUI

npm i element-ui -S

在main.js中引入并注册

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

1.2使用

1.2.1table组件使用

<template>
    <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>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  }
}
</script>

属性

lable:决定当前列显示出的标题

prop:决定数据是那个属性

:data:数据源

table组件-自定义插槽

我们需要在对应的列中,使用template标签包裹我们自定义渲染的内容

<el-table-column label="操作" width="100">
    <template>
      <el-button size="small" type="danger">删除</el-button>
    </template>
</el-table-column>

table组件-自定义列-作用域插槽

后端返回的数据中，只有一个指代性别的编码，为了方便用户查看，需要我们把1转换成男，0转换成女。

解决办法:

<el-table-column label="性别">
  <!-- 
    1. slot-scope是固定写法
  2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据
  传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
  3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
  -->
    <template slot-scope="scope">
      {{ transGender(scope.row.gender) }}
    </template>
</el-table-column>

<script>
  export default {
      methods: {
        transGender(genderCode) {
          console.log(genderCode)
          const genderList = {
            1: '男',
            0: '女'
          }
          return genderList[genderCode]
        }
      }
  }
</script>

1.2.2 Pagination翻页组件

属性:

layout:布局

tatal : 用来设置数据的总条数

@current-change:分页事件

page-size:默认每页10条数据

翻页事件

<template>
  <div>
    <h1>Pagination</h1>
    <el-pagination
      layout="prev, pager, next"
      :total="1000"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    // 把当前点击的页数给传进来
    pageChange(page) {
      console.log(page)
    }
  }
}
</script>

1.2.3 From表单组件-表单验证

步骤1-定义表单验证规则

rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
}

步骤2-模板中的配置

1. 给 el-form 组件绑定 model 为表单数据对象
2. 给 el-form 组件绑定 rules 属性配置验证规则
3. 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称

代码:

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

步骤3-手动兜底验证

element-ui的表单组件.validate(valid => {
    if(valid) {
       // 通过了验证
    } else {
         // 验证失败
    }
})

说明：

• validate 方法是表单组件自带的，用来对表单内容进行检验。
• 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

代码-模板

<el-form label-width="80px" 
+  ref="form"
   :model="form"
   :rules="rules">

添加ref来引用el-form组件

代码:

doLogin () {
  alert('我可以做登录了')
},
submit () {
  this.$refs.form.validate(valid => {
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if (valid) {
      // 通过了验证，你可以做后续动作了
      this.doLogin()
    }
  })
}

注意

下面三个地方的属性名必须一样

表单验证-自定义校验规则

rules:{
    属性名1: [
      { 
        // 注意参数顺序
        validator: function (rule, value, callback) {
            // rule：采用的规则
          // value: 被校验的值
          // callback是回调函数， 
          //      如果通过了规则检验，就直接调用callback()
          //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
            //         例如：callback(new Error('错误说明'))
        }, 
        trigger: 'blur' 
     }]
}

落地代码

rules: {
  name: [{required: true, message:'必须要填入', triggle: 'blur'}],
  code: [
      {
        validator:(rule, value, callback)=>{
          console.log(rule, value, callback)
          if(value === '123456') {
            callback(new Error('这是世界上最差的密码了'))
          } else {
            callback()
          }
        },
        triggle: 'blur'
      },
      {min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
      {required: true, message:'必须要填入', triggle: 'blur'},
  ]
}

Form表单组件-清理校验痕迹

this.$refs.form组件的引用.resetFields()

1.2.4 Tree组件基础使用

<template>
  <el-tree :data="data"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }]
    }
  }
}
</script>

1.2.5 Dialog弹窗组件

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <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
      }
    }
  }
</script>

1.2.6 监听open和close事件

弹框组件有俩种状态，一个是打开一个是关闭，如果我们想在它打开或者关闭时做一些自己的事情，就可以监听俩个事件

@close 弹框关闭 : dialogVisible从true变成false

@open 弹框打开 : dialogVisible从false变成true