一、element安装

• 地址：https://element-plus.gitee.io/zh-CN/guide/design.html

1、安装命令：

• npm install element-plus —save

二、相关操作

1、引入资源

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2、按钮

• 单个按钮：<el-button></el-button>

  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

• 组按钮<el-button-group></el-button-group>

    <el-button-group>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
    </el-button-group>

3、表格

<template>
    <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" />
  </el-table>
</template>
<script>
export default{
  data(){
    return {
      ouyangke: "欧阳克",
      tableData: [
        {
          id: '1',
          name: 'Tom',
          age: '38岁',
        },
        {
          id: '2',
          name: 'Tom',
          age: '48岁',
        },
        {
          id: '3',
          name: 'Tom',
          age: '18岁',
        },
        {
          id: '4',
          name: 'Tom',
          age: '28岁',
        },
      ]
    }
  },
}
</script>

prop对应下标；label对应表格的标题；

4、分页

• current-change：改变时触发

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" />
  </el-table>
  <el-pagination layout="prev, pager, next" :total="50" @current-change="fun()"/>
</template>
<script>
export default{
  data(){
    return {
      ouyangke: "欧阳克",
      tableData: [
        {
          id: '1',
          name: 'Tom',
          age: '38岁',
        },
        {
          id: '2',
          name: 'Tom',
          age: '48岁',
        },
        {
          id: '3',
          name: 'Tom',
          age: '18岁',
        },
        {
          id: '4',
          name: 'Tom',
          age: '28岁',
        },
      ]
    }
  },
  methods : {
    fun(){
      alert('被点击了');
      this.tableData = [
        {
          id: '5',
          name: '小编1',
          age: '38岁',
        },
        {
          id: '6',
          name: '小编2',
          age: '48岁',
        },
        {
          id: '7',
          name: '小编3',
          age: '18岁',
        },
        {
          id: '8',
          name: '小编4',
          age: '28岁',
        },
      ]
    }
  },
}
</script>

5、input输入框

• Event事件：input 在input值改变时触发：

<template>
  <el-input v-model="ouyangke" placeholder="Please inout" @input="fun()"/>
</template>
<script>
export default{
  methods : {
    fun(){
      console.log('打印input');
      }
    }
}
<script>

• blur：input失去焦点

<template>
  <el-input v-model="ouyangke" placeholder="Please inout" @blur="fun()"/>
</template>
<script>
export default{
  methods : {
    fun(){
      console.log('打印input');
      }
    }
}
<script>

6、多选框

<template>
    <el-checkbox v-model="checked1" label="Option 1" size="large" />
    <el-checkbox v-model="checked2" label="Option 2" size="large" />
</template>
<script>
export default{
  data(){
    return {
      checked1:true,
      checked2:false,
    }
  }
},
</script>

7、流程控制

• for

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>Card name</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
  <!-- v-for 是vue循环,循环数组 对象 json数据  -->
  <!-- key 是唯一表示,如果没有,会报黄色错误 -->
  <!-- : 是绑定属性,key是属性,里面的值是变量 -->
  <div v-for="v in tableData" :key="o">
    {{ 'List item' + v.id + v.name + v.age }}
  </div>
  </el-card>
</template>
<script>
export default{
  data(){
    return {
      checked1:true,
      checked2:false,
      ouyangke: "欧阳克",
      tableData: [
        {
          id: '1',
          name: 'Tom',
          age: '38岁',
        },
        {
          id: '2',
          name: 'Tom',
          age: '48岁',
        },
        {
          id: '3',
          name: 'Tom',
          age: '18岁',
        },
        {
          id: '4',
          name: 'Tom',
          age: '28岁',
        },
      ]
    }
  },
}
</script>

• if else

  <!-- foreach($arr as $k=>$v) 跟php是相反的 -->
  <!-- 下标要写在v-for循环里 -->
  <div v-for="(v,item,index) in tableData" :key="o">
    <div v-if="v.status == 1">
      {{ '下标:' + item + ',下标:' + index + ' ,ID:' + v.id + ' ,姓名:' + v.name + ' ,年龄:' + v.age }}
    </div>
    <div v-else="v.status == 0" style="color:red;">
      {{ '下标:' + item + ',下标:' + index + ' ,ID:' + v.id + ' ,姓名:' + v.name + ' ,年龄:' + v.age }}
    </div>
  </div>

• 循环变量名解释：

  <div v-for="(item,index,key) in arr">
      {{ item + ', ' + index + ',' + key }}
  </div>

<!-- (item,index,key)循环里的3个变量名,是自定义的 --> <!-- item: 循环数据 index: 自定义下标 key: 默认下标 0 1 2 3 4 -->

8、展开下拉框

<template>
  <!-- 展开下拉框 -->
  <select name="name" v-model="name">
      <option value="">-- 请选择 --</option>
      <option value="ouyangke">欧阳克</option>
      <option value="zhutianpeng">朱天蓬</option>
      <option value="miejueshitai">灭绝师太</option>
      <option value="ximendaguanren">西门大官人</option>
  </select>
</template>
<script>
export default{
  data(){
    return {
      name : "ouyangke",
      }
  },
}
</script>

数据的name值 = vlaue值，默认选择展示

三、创建vue3组件

1、创建组件

• a.路径：src/components/
• b.创建组件文件：驼峰命名方式，OyDiv.vue
• c.首页输入需要展示的内容

  <template>
  <div>欧阳克</div>
  <oy-div style="color:red;" size="2">欧阳组件</oy-div>
  <OyDiv style="color:red;" size="2">欧阳组件</OyDiv>
  </template>

• d.引入组件文件

  import OyDiv from "./components/Oydiv.vue";

• e.加载组件

  export default{
  // data:数据; methods:js计算属性等; 
  // components:组件; 使用组件,传值
  components:{
    OyDiv
  },
  }

  

批改老师：PHPz

批改状态：合格

老师批语：