Element组件（基础组件和配置组件）

---

button

---

         button API

         ButtonGroup API

---

Radio单选框

---

         单选框格式  <el-radio>

<template>
    <el-radio v-model="radio" label="1">选项</el-radio>
    <el-radio v-model="radio" label="2">选项</el-radio>
</template>
 
<script>
    export default {
        data(){
            //默认选中的按钮
            return{
                radio:'1'
            }
        }
    }
</script>

        单选框组格式： <el-radio-group>

<template>
    <el-radio-group v-model="radio">
        <el-radio label="1">选项</el-radio>
        <el-radio label="2">选项</el-radio>
    </el-radio-group>
</template>
 
<script>
    export default {
        data(){
            return{
                radio:'1'
            }
        }
    }
</script>

        单选按钮格式 <el-radio-button>

<template>
    <el-radio-group v-model="radio">
        <el-radio-button label="1">选项</el-radio-button>
        <el-radio-button label="2">选项</el-radio-button>
    </el-radio-group>
</template>
 
<script>
    export default {
        data(){
            return{
                radio:'1'
            }
        }
    }
</script>

        Radio Attributes

         Radio Event

        Radio-group Attributes

        Radio-group Events

---

Checkbox多选框

---

         格式：<el-checkbox>

<template>
    <el-checkbox v-model="checked">选项</el-checkbox>
</template>
<script>
    export default{
        data(){
            return{
                checked:true
            }
        }
    }
</script>

        多选框组<el-checkbox-group>

 

<template>
    <el-checkbox-group v-model="checkList">
        <el-checkbox label="A"></el-checkbox>
        <el-checkbox label="B"></el-checkbox>
        <el-checkbox label="C"></el-checkbox>
    </el-checkbox-group>
</template>
<script>
    export default {
        data(){
            //多选
            return{
                checkList:["A","C"]
            }
        }
    }
</scrpit>

         多选按钮<el-checkbox-button> 

<template>
  <el-checkbox-group v-model="checkList">
      <el-checkbox-button label="A"></el-checkbox-button>
      <el-checkbox-button label="B"></el-checkbox-button>
      <el-checkbox-button label="C"></el-checkbox-button>
  </el-checkbox-group>
</template>
<script>
  export default {
      data(){
          //多选
          return{
              checkList:["A","C"]
          }
      }
  }
</script>

        与单选框Radio不同的Attributes

        获取选中的checkbox的label值

        

<template>
  <el-checkbox-group v-model="checkedList">
    <el-checkbox label="1">A</el-checkbox>
    <el-checkbox label="2">B</el-checkbox>
  </el-checkbox-group>
  <div>你选择{{checkedList}}</div>
</template>
<script>
  export default{
    data(){
      return{
        checkedList:[]
      }
    }
  }
</script>

---

Boder边框 

---

---

Container布局容器

---

        格式：

<el-container>  //外层容器
    <el-header></el-header> //顶栏容器
    <el-aside></el-aside>  //侧边栏容器
    <el-main></el-main>  //主要区域容器
    <el-footer></el-footer>  //底栏容器
</el-container>

         必须被外层容器包裹，子元素与<el-header>和<el-footer>垂直分布，其他都水平分布

        Container Attributes

        Header Attributes

        Aside Attributes

        Footer Attributes

---

Icon图标

---

        1.安装包

npm install @element-plus/icons-vue

        2.注册图标，导入全局变量

        在main.js中添加

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

        浏览器引入

        <script src="//unpkg.com/@element-plus/icons-vue"></script>

        3.用法

---

Layout布局

---

        通过24分栏，迅速简便的创建布局

        格式： 

<el-row >
    <el-col :span="">...</el-col>
</el-row>

        Row Attributes

        Col Attributes

 

---

Link链接

---

---

滚动条

---

         Scrollbar

---

 Space间距

---

---

Config Provider 全局配置

---

---

Form表单组件

---

         Autodcomplete自动补全输入框

<template>
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearch"
        clearable
        class="inline-input w-50"
        placeholder="Please Input"
        @select="handleSelect"
      />
 
</template>
 
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
 
interface RestaurantItem {
  value: string
  link: string
}
 
const state = ref('')
 
const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}
 
const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}
 
onMounted(() => {
  restaurants.value = loadAll()
})
</script>

        Cascader级联选择器