Element组件库项目2 day-01

Element:是一个pc布局,样式的一个常见的组件库

vue技术栈组件库

​ 1,移动端:（Vant, Cube-UI, NutUI ）

​ 2,PC端:（ element-ui, Ant Design of Vue, iView）

element是做pc端项目的首选

使用组件遇到的问题

​ 1,去官网找常见的问题(一般是在页面的底部)

​ 2,去 issue (这里面也有一些常见的问题) 直接去问组件的开发者

Element基本使用

第一步:进入官网,
    
第二部:新建项目,在项目里安装Elenent
	npm i element-ui -S

第三部:在main.js 中引入整个的Elenent
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';

第四部:就可以使用Elenent组件了(找到一些自己喜欢样式,直接vc打法)

项目创建

1,新建一个文件夹
2,在上面路径输入 cmd 打开命令窗口
3,输入创建项目的指令 vue create 项目名
4,创建项目有个选项 选择这个 Default ([Vue 2] babel, eslint)
5,项目创建完毕后 cd进入项目路径 (如果使用组件 先下载组件 例如:Element)
6,项目启动 :　yarn serve

练习1

​ 需求: 一个校验规则，用户名：11位正确的手机号，密码是6-8位的字符

	Element标签样式

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :rules='rules'>
      <el-form-item label="用户名"  prop='name'>
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop='password'>
        <el-input v-model="form.password" ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

//=====================================================

vue代码

export default {
  data() {
    return {
      form: {
        name: "",
       password:''
      },
      rules:{
        name:[
          {required:true,message:'请输入手机号',trigger:'blur'},
          {pattern:/^1[0-9]{10}$/,message:'请输入正确的手机号'}
        ],
        password:[
          {min:6,max:8,message:'请输入6-8位的正确密码',trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};

插槽

1,<template slot-scope="变量"> 包裹着自定义渲染的内容 </template>

2,slot-scope="" : 固定写法

3,scope.row 可以拿到某个对象的数据 (row也是固定的)

翻页事件( Pagination)

@current-change=""  定义翻页事件(用户点击时会触发这个事件)

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
export default {
  methods: {
    // 用户点击时候会把页数传过来
    pageChange(page) {
      console.log(page)
    }
  }
}

layout:组件布局,子组件用逗号分割
total:一共有多少条数据
page-sizes:默认每页有多少条数据

Form表单

实现数据双向绑定
1,变量里的mobile,在标签里面要用v-modle="for.modile" 绑定在一起

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :rules='rules'>
      <el-form-item label="用户名"  prop='name'>
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop='password'>
        <el-input v-model="form.password" ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

export default {
  data() {
    return {
      form: {
        name: "",
       password:''
      },
      
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};

表单的校验

比如:输入框没有内容的时候点击按钮不能提交

1,在对应的标签内也要写 :rules='rules' 
	:rules='' 这个是固定的,后面的rules要和下面的rules对上

rules:{ //这个写在变量里
    变量名:[
        {校验规则}
    ]
}

兜底验证

1, this.$refs.form需要表单组件的引用,(比如:ref)
2, 写在事件里面
this.$refs.form.validate(valid => {
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if (valid) {
      // 通过了验证，你可以做后续动作了
      this.doLogin()
    }
  })

清理校验痕迹

作用:当输入框输入错误的时候,用户点击可以清空掉输入框的内容和错误的提示信息

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

树状结构

作用:点击树形节点的时候,如何获取到这项节点对应的数据

需要设置@node-click="handleNodeClick"  

  <template>
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </template>
export default {
    data(){
        return{
            data:[
                {
                    树状结构代码
                }
            ]
        }
    },
    methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
}