主题颜色与暗黑模式设置
要实现如上暗黑模式和主题颜色的设置使用Popover 气泡卡片、el-color-picker取色器、el-switch基础组件。
1234567891011121314151617181920212223242526272829303132333435363738394041424344<!-- el-popover placement：展现的位置 title：标题 tigger：触发方式 el-color-picker change:当绑定值变化时触发 show-alpha 是否支持透明度选择 predefine 预定义颜色 el-switch change switch 状态发生变化时的回调函数 inactive-icon 和 active-icon 属性来添加图标 inline-prompt 属性来控制图标显示在点内--> <el-popover placement="bottom" title="主题设置" :width="300" trigger=&quo ...
树形Tree控件
elemt-plus树形控件展示如上所示，示例代码如下：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768<template> <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps" /></template><script lang="ts" setup>const defaultProps = { children: 'children' ...
单选框和全选框的组合使用
原始elemt-plus代码已经实现效果：
示例代码如下：
123456789101112131415161718192021222324252627282930313233343536<template> <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" >Check all</el-checkbox > <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" > <el-checkbox v-for="city in cities" :key="city" :label="city&quo ...
搜索按钮的逻辑
当我们想要实现搜索按钮时，其逻辑如下：
界面显示按钮控件赋予点击函数
编辑点击函数
调用搜索API
获取返回结果
1234567891011<el-form-item> <el-button type="primary" size="default" :disabled="keyword ? false : true" @click="search" > 搜索 </el-button> <el-button type="primary" size="default" @click="reset">重置</el-button></el-form-item>
123456789101112131415161718192021 ...
抽屉组件+走马灯组件的应用
要实现侧边栏抽屉组件的展示 代码如下：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 <!-- 抽屉组件:展示商品详情 drawer：true和false来控制抽屉组件的显示与隐藏 header：头部插槽 el-carouse：走马灯组件--> <el-drawer v-model="drawer"> <!-- 标题部分 --> <template #header> <h4>查看商品的详情</h4> </template> <template #default> <el-row style="margin: 10px 0px"> <el-col :sp ...
SPU模块
为实现当前界面操作：
其中SPU名称、SPU名称、SPU图片为用户输入获取数据。
SPU品牌、SPU销售属性为通过API调用数据。
12345678910111213141516171819202122232425//添加一个新的SPU初始化请求方法const initAddSpu = async (c3Id: number | string) => { //清空数据 Object.assign(SpuParams.value, { category3Id: '', //收集三级分类的ID spuName: '', //SPU的名字 description: '', //SPU的描述 tmId: '', //品牌的ID spuImageList: [], spuSaleAttrList: [], }) //清空照片 imgList.value = [] //清空销售属性 saleAttr.value = [] sal ...
表单数据的展示与添加删除
需要完成如上功能：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971 ...
分级连续获取api
要实现如上所示分级展开el-select选项：
在onMounted的时候获得一级分类的数据
当我们点击一级分类的选项后 执行函数获得二级分类的数据
点击二级分类的数据之后再获得三级分类的数据
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<template> <el-card> <!-- inline="true"设置行内表单展示为1行 --> <el-form :inline="true"> <el-form-item label="一级分类"> <!-- 其中c1Arr在onMounted的时候获得 ch ...
对话框组件
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<!-- 对话框组件:在添加品牌与修改已有品牌的业务时候使用结构 --><!-- v-model:属性用户控制对话框的显示与隐藏的 true显示 false隐藏 title:设置对话框左上角标题 trademarkParams：对话框中的参数标题和图片 --><el-dialog v-model="dialogFormVisible" :title="trademarkParams.id ? '修改品牌' : '添加品牌'"> <el-form style="width: 80%" :model="trademarkParams" :rules="rules&qu ...
分页列表
1234567891011121314151617181920<!-- 分页器组件 pagination v-model:current-page:设置分页器当前页码 v-model:page-size:设置每一个展示数据条数 page-sizes:用于设置下拉菜单数据 background:设置分页器按钮的背景颜色 layout:可以设置分页器六个子组件布局调整sizeChange：当页面改变时执行此函数 --><el-pagination @size-change="sizeChange" @current-change="getHasTrademark" :pager-count="9" v-model:current-page="pageNo" v-model:page-size="limit" :p ...