24.12.02 Element

import { createApp } from 'vue'
// 引入elementPlus js库 css库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'import App from './App.vue'
//router单独的配置文件
import router from './router'//typescript js语法做了类型限制
//对象要先设定类型 使用变量 要标记类型let myVue = createApp(App)
//vue插件 与vue高度集成
//启动router插件
myVue.use(router)
//启用elementPlus插件
myVue.use(ElementPlus, {locale: zhCn,})
//把所有图标导入vue全局组件库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {myVue.component(key, component)
}myVue.mount('#app')

2elementPlus常用组件

2.2基础组件 按钮

按钮主要是样式 比较简单

<template><!-- 基础组件  --><el-button :loading-icon="Eleme" :loading="loadStauts" >Default</el-button><el-button type="primary" disabled>Primary</el-button><el-button type="success">Success</el-button><el-button type="info" :disabled="btnStatus">{{ username }}</el-button><el-button type="warning" link>Warning</el-button><el-button type="danger" text>Danger</el-button><el-button type="primary" :icon="Edit" circle /><el-button type="success" :icon="Check" circle /><el-icon><Check /></el-icon><el-button type="primary">Upl<el-icon class="el-icon--right"><Upload /></el-icon>oad</el-button><el-button-group class="ml-4"><el-button type="primary" :icon="Edit" /><el-button type="primary" :icon="Share" /><el-button type="primary" :icon="Delete" /></el-button-group><el-button color="#19a" >Default</el-button></template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {Check,Edit,Upload,Share,Delete
} from '@element-plus/icons-vue'/*
ui库中的自定义标签 基础用法与原生标签/属性一致如果不支持 没有效果*/ 
const username = ref('jack');
const btnStatus = ref(false)
const loadStauts = ref(false)</script><style scoped></style>

2.3边框 颜色等其他基础组件

<template><div class="radius" style="width: 100px;height: 100px; border-radius: var(--el-border-radius-round);box-shadow: var(--el-box-shadow-dark);background-color: rgb(179, 224.5, 156.5);" ><el-icon><Lock /></el-icon><el-link href="http://www.baidu.com" type="success">success</el-link><el-text class="mx-1" type="success">Success</el-text></div></template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {Check,Edit,Upload,Share,Delete
} from '@element-plus/icons-vue'/*
ui库中的自定义标签 基础用法与原生标签/属性一致如果不支持 没有效果*/ </script><style scoped>.radius {height: 40px;width: 70%;border: 1px solid var(--el-border-color);border-radius: 0;margin-top: 20px;
}
</style>

2.4布局组件

<template><!-- 每行默认24分栏 如果页面需要分布局时  使用 el-row 搭配el-col使用 可以不足24 但是不能超vue 响应式变量 (自动变化)--><el-row :gutter="20">//会有留白<el-col :span="8">11111</el-col><el-col :span="8">11111</el-col><el-col :span="8"><el-row ><el-col :span="12">11111</el-col><el-col :span="12">11111</el-col></el-row></el-col></el-row><el-row :gutter="20"><el-col :offset="2" :span="10">11111</el-col><el-col :span="10">11111</el-col></el-row><el-row justify="space-around"><el-col :span="10">11111</el-col><el-col :span="10">11111</el-col></el-row><!-- 在不同设备上 显示效果会改变套壳APP 只能访问特定网站 浏览器功能按钮全砍掉pc         html css jsios        objcetCAndroid    java -->
<el-row ><el-col :xs="12" :sm="4" :md="20" :lg="12" >11111</el-col><el-col :xs="12" :sm="20" :md="4" :lg="12" >11111</el-col></el-row></template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {Check,Edit,Upload,Share,Delete
} from '@element-plus/icons-vue'/*
ui库中的自定义标签 基础用法与原生标签/属性一致如果不支持 没有效果*/ </script><style scoped>.radius {height: 40px;width: 70%;border: 1px solid var(--el-border-color);border-radius: 0;margin-top: 20px;
}
</style>

2.5输入框

<template>
<!-- 
插入图标有两种写法
--><el-input v-model="input" style="width: 240px"   type="textarea"  clearable placeholder="Please input" :suffix-icon="Calendar" />{{ input }}<el-input v-model="input2" style="width: 240px" type="password" show-password placeholder="Please input"><template #prefix>aaaa<el-icon class="el-input__icon"><calendar /></el-icon></template></el-input><el-input v-model="input2" style="width: 240px" type="password" show-password placeholder="Please input"><template #prepend>aaaa<el-icon class="el-input__icon"><calendar /></el-icon></template></el-input><br><el-inputv-model="text"style="width: 240px"maxlength="10"placeholder="Please input"show-word-limittype="text"/>
</template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {Calendar,
} from '@element-plus/icons-vue'const input = ref('')
const input2 = ref('')
const text = ref('')</script><style scoped></style>

2.6数字输入框

<template>
<!-- 官网文档是ts代码 去掉ts中类型部分 可以成js--><el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /></template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {Calendar,
} from '@element-plus/icons-vue'const num = ref(1)const handleChange = (value) => {console.log(value)
}</script><style scoped></style>

2.7单选多选开关

<template><el-radio-group v-model="radVal"><el-radio value="1" size="large">Option 1</el-radio><el-radio value="2" size="large">Option 2</el-radio></el-radio-group>{{ radVal }}<el-radio-group v-model="radVal2" size="large"><el-radio-button value="1" >New York</el-radio-button><el-radio-button value="2" >Washington</el-radio-button><el-radio-button value="3" >Los Angeles</el-radio-button><el-radio-button value="4" >Chicago</el-radio-button></el-radio-group>{{ radVal2 }}<hr><el-checkbox-group v-model="checkList"><el-checkbox :value="1" >A</el-checkbox><el-checkbox :value="2" >B</el-checkbox><el-checkbox :value="3" >C</el-checkbox></el-checkbox-group>{{ checkList }}<hr><el-switchv-model="switchVal"style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"active-text="是"inactive-text="否"inline-prompt/>{{ switchVal }}
</template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {Calendar,
} from '@element-plus/icons-vue'const radVal = ref('1')
const radVal2 = ref('1')
// 注意数据类型 如果类型不匹配 无法选中 
const checkList = ref([1,'3'])//不是:value要用字符串类型const switchVal = ref(true)</script><style scoped></style>

2.8下拉列表

<template><el-selectv-model="selVal"placeholder="请选择"size="large"style="width: 240px"clearablemultiple //可多选、与clearable不可叠加><el-option value="001">北京</el-option><el-option value="002" disabled>上海</el-option><el-option value="003">深圳</el-option></el-select>{{ selVal }}<hr/>
<!--  自动根据层级遍历  (有父子关系的数据)遍历时的key有默认值   label 显示内容 value 选项值 children 子数据-->
<el-cascader v-model="casVal" 
:options="options.optionList" 
:props="props"/>
{{ casVal }}</template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'import {Calendar,
} from '@element-plus/icons-vue'const selVal = ref('')
const casVal = ref('')const props = {'label':'name','children':'subArea','value':'code'
}const options = reactive({optionList:[]})onMounted(()=>{console.log(areaData);options.optionList = areaData
})</script><style scoped></style>

2.9日期选择

有日期选择 时间选择

<template><el-date-pickerv-model="dataStr"type="datetime"placeholder="Select date and time"value-format="YYYY-MM-DD HH:mm:ss"/>{{ dataStr }}
</template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'const dataStr = ref('')</script><style scoped></style>

2.10table组件

table是数据显示的主要组件 每个页面都要使用

主要作用是显示后端返回的动态数据

<template>
<!-- 单选<el-table highlight-current-row 
stripe border 
height="250" 
:data="tableData.dataList" 
style="width: 100%"
@current-change="handleCurrentChange"
>
-->
<el-table 
ref="tableRef"  // 使用ref可用拿到对应的table对象
stripe border 
height="250" 
:data="tableData.dataList" 
style="width: 100%"><el-table-column type="selection" width="55" /><el-table-column fixed  prop="date" label="日期" width="180" /><el-table-column prop="name" label="名称" width="180" /><el-table-column prop="status" label="状态" width="180" ><!--  table遍历数据插槽的基础上  通过template标签 可自定义table中的内容  自定义每列的内容 美化table--><template #default="xxx"><el-button type="success" v-if="xxx.row.status ==1" >正常</el-button><el-button type="warning" v-else-if="xxx.row.status ==2" >请假</el-button></template></el-table-column><el-table-column prop="address" label="Address" width="280"/><el-table-column prop="address" label="Address" width="280"/><el-table-column prop="address" label="Address" width="280"/><el-table-column fixed="right" label="操作" width="280"><el-button type="warning"  >修改</el-button><el-button type="danger"  >删除</el-button></el-table-column></el-table><el-button @click="myTest">测试</el-button></template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'let currentRow = {};//文件编译 时会把相同名称的html元素绑定到一起
const tableRef = ref()const tableData = reactive({dataList:[]})const myTest = ()=>{console.log(tableRef.value);//获得的是全部的console.log(tableRef.value.getSelectionRows());//获得的是选中的}const handleCurrentChange = (val)=>{console.log(val);currentRow = val;
}onMounted(()=>{tableData.dataList =  [{date: '2016-05-03',name: 'Tom',status:1,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',status:1,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',status:1,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',status:2,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',status:1,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]})</script><style scoped></style>

注意:

table是自动遍历的 所以显示每列数据时 通常需要自定义显示的列

需要搭配table的数据插槽使用 主要作用美化界面 提高交互效果

    <el-table-column prop="status" label="状态" width="180" ><!--  table遍历数据插槽的基础上  通过template标签 可自定义table中的内容  自定义每列的内容 美化table--><template #default="xxx"><el-button type="success" v-if="xxx.row.status ==1" >正常</el-button><el-button type="warning" v-else-if="xxx.row.status ==2" >请假</el-button></template></el-table-column>

2.11分页组件

  <el-paginationv-model:current-page="pageInfo.pageData.page"v-model:page-size="pageInfo.pageData.pageSize":total="pageInfo.pageData.total":page-sizes="[10, 20, 30]" //依次为10页显示方式  总共50页 共有5页layout="total, sizes, prev, pager, next, jumper"@current-change="paginationCurrentChange"@size-change="paginationSizeChange"/>

// const total = ref(77);
// const page = ref(2);
// const pageSize = ref(10);
const pageInfo = reactive({pageData:{page:1,pageSize:10,total:55,
}})/*
经常与table的分页功能搭配使用 
用户点击按钮时 重新查询table数据 响应之后 给table赋值刷新数据
*/ 
const paginationCurrentChange = (val)=>{console.log(val);}
const paginationSizeChange = (val)=>{console.log(val);
}

注意:分页组件通常与table组合使用

2.12tree组件

// tree自动遍历 有默认读取的key
// 可以通过自定义key的对应表 指定解析的数据//注意:自动的遍历如果没有显示数据 有可能是key每对上(有没有文字的选项)
//对应key的部分多注意 仔细 多复制

//部分代码key没有完全对应
<template><el-treestyle="max-width: 600px":data="data":props="defaultProps"/>
</template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'
// tree自动遍历 有默认读取的key
// 可以通过自定义key的对应表 指定解析的数据//注意:自动的遍历如果没有显示数据 有可能是key每对上(有没有文字的选项)
//对应key的部分多注意 仔细 多复制
const defaultProps = {children: 'subData',label: 'name',
}const data = [{name: 'Level one 1',subData: [{label: 'Level two 1-1',children: [{label: 'Level three 1-1-1',},],},],},{label: 'Level one 2',children: [{label: 'Level two 2-1',children: [{label: 'Level three 2-1-1',},],},{label: 'Level two 2-2',children: [{label: 'Level three 2-2-1',},],},],},{label: 'Level one 3',children: [{label: 'Level two 3-1',children: [{label: 'Level three 3-1-1',},],},{label: 'Level two 3-2',children: [{label: 'Level three 3-2-1',},],},],},
]</script><style scoped></style>

2.13菜单组件

菜单一般做动态菜单 由后端加载数据 在前端展示

<template><e-row><el-col :span="6" ><el-menuactive-text-color="#ffd04b"background-color="#545c64"default-active="2" //与active-text-color="#ffd04b"形成高亮text-color="#fff">
<!-- 系统管理人员管理菜单管理财务管理人员工资财务报表          --><el-sub-menu v-for="menu in menuList.menuData" :index="menu.mid+''"><template #title><el-icon><component :is="menu.icon"></component></el-icon><span>{{ menu.mname }}</span></template><el-menu-item v-for="subm in menu.subMen" :index="subm.mid+''"><el-icon><component :is="subm.icon"></component></el-icon><span>{{ subm.mname }}</span></el-menu-item></el-sub-menu><!-- <el-sub-menu index="1"><template #title><el-icon><Check /></el-icon><span>系统管理</span></template><el-menu-item index="11"><el-icon><Edit /></el-icon><span>人员管理</span></el-menu-item><el-menu-item index="12"><el-icon><Edit /></el-icon><span>菜单管理</span></el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><Share /></el-icon><span>财务管理</span></template><el-menu-item index="21"><el-icon><Edit /></el-icon><span>人员工资</span></el-menu-item><el-menu-item index="22"><el-icon><Edit /></el-icon><span>财务报表</span></el-menu-item></el-sub-menu> --><!-- <el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item> --></el-menu></el-col></e-row><!-- 动态标签 <component :is="'input'"></component> --></template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'
import {Check,Edit,Upload,Share,Delete
} from '@element-plus/icons-vue'const menuList = reactive({menuData:[]})onMounted(()=>{//后端取值menuList.menuData = [{mid:1,mname:"系统管理",icon:'Upload',subMen:[{mid:11,mname:"用户管理",icon:'Delete'},{mid:12,mname:"菜单管理",icon:'Edit'}]},{mid:2,mname:"财务管理",icon:'Share',subMen:[{mid:21,mname:"财务1",icon:'Edit'},{mid:22,mname:"财务2",icon:'Edit'}]}]
})</script><style scoped></style>

2.14反馈组件

<template><el-button :plain="true" @click="myopen">Success</el-button><el-button plain @click="open">Click to open the Message Box</el-button><el-button plain @click="dialogVisible = true">//dialogVisible(刚开始时不显示) = true（点击显示）Click to open the Dialog</el-button><el-button plain @click="drawerVisible = true">Click to open the Drawer </el-button><!-- 多功能组合到同一个界面时 使用对话框 --><el-dialogv-model="dialogVisible"title="Tips"width="500"><span>可以放表格 表单 或其他界面</span></el-dialog><el-drawerv-model="drawerVisible"title="I am the title":direction="'btt'"><span>这是抽屉</span></el-drawer></template><script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
/*
ElMessage     显示用
ElMessageBox  交互用
*/import { ElMessage, ElMessageBox } from 'element-plus'const myopen = ()=>{ElMessage.error('恭喜你操作成功')}const open = () => {ElMessageBox.confirm('确认要继续me?','警告',{confirmButtonText: '确定',cancelButtonText: '不确定',type: 'error',}).then(() => {console.log("执行");}).catch(() => {console.log("点了取消");})
}const dialogVisible = ref(false)//表示刚开始时不显示
const drawerVisible = ref(false)
</script><style scoped></style>