电子商务网站建设策划书 服装 有详细数据库设计,网络营销网站建设流程,淘宝开网店怎么开 新手,wordpress 添加缩略图elementui组件为vue提供了各式各样的ui组件#xff0c;但均为各类最为基本的控件#xff0c;没有提供业务级的使用案例#xff0c;为此进行扩展补充。 vue-elementui 基本入门使用
一、下拉菜单
下拉菜单与html中的select控件有所差距#xff0c;select为表单控件的一员页…elementui组件为vue提供了各式各样的ui组件但均为各类最为基本的控件没有提供业务级的使用案例为此进行扩展补充。 vue-elementui 基本入门使用
一、下拉菜单
下拉菜单与html中的select控件有所差距select为表单控件的一员页面效果类似于输入框而下拉菜单为功能设置控件。
select控件的使用可以参考https://element.faas.ele.me/#/zh-CN/component/select
1.1 基本使用
elementui组件中下拉菜单的详细使用介绍如下 https://element.faas.ele.me/#/zh-CN/component/dropdown
下拉菜单的控件名称为el-dropdown关于下拉列表所有的属性事件都应该设置在此。其子控件span为收缩后所显示的内容el-dropdown-menu子控件为展开后显示的内容。关于具体的页面效果则要设置到具体控件上。
从以下代码可以看出设置el-dropdown的trigger“click”则使下拉菜单在点击后激活。
el-row classblock-col-2el-col :span12span classdemonstrationhover 激活/spanel-dropdownspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item iconel-icon-plus黄金糕/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus狮子头/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus-outline螺蛳粉/el-dropdown-itemel-dropdown-item iconel-icon-check双皮奶/el-dropdown-itemel-dropdown-item iconel-icon-circle-check蚵仔煎/el-dropdown-item/el-dropdown-menu/el-dropdown/el-colel-col :span12span classdemonstrationclick 激活/spanel-dropdown triggerclickspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item iconel-icon-plus黄金糕/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus狮子头/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus-outline螺蛳粉/el-dropdown-itemel-dropdown-item iconel-icon-check双皮奶/el-dropdown-itemel-dropdown-item iconel-icon-circle-check蚵仔煎/el-dropdown-item/el-dropdown-menu/el-dropdown/el-col
/el-rowstyle.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}.demonstration {display: block;color: #8492a6;font-size: 14px;margin-bottom: 20px;}
/style页面效果如下当鼠标触发相应事件hover|鼠标覆盖、click|鼠标单击后下拉菜单显示。
1.2 属性介绍
不隐藏展开后的下拉框
下拉菜单默认在点击菜单项后会被隐藏将el-dropdown的hide-on-click属性默认为false可以关闭此功能。
下拉框选中事件
这其实是指令事件通过将事件函数绑定到el-dropdown 的command属性实现当用户选择相应的选项后则将对应的command值传递给事件函数
el-dropdown commandhandleCommandspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item commanda黄金糕/el-dropdown-itemel-dropdown-item commandb狮子头/el-dropdown-itemel-dropdown-item commandc螺蛳粉/el-dropdown-itemel-dropdown-item commandd disabled双皮奶/el-dropdown-itemel-dropdown-item commande divided蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdownstyle.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
/stylescriptexport default {methods: {handleCommand(command) {this.$message(click on item command);}}}
/script这里的事件函数为handleCommand通过对command进行判断来区分用户输入。
二、列表环境的下拉菜单
2.1 列表使用
在vue中展示数据时经常出现列表在单元容器上使用v-for即可实现循环然后实现列表展示。
templatediv classdemo-imagev-loadingloadingelement-loading-text等待服务器处理中element-loading-spinnerel-icon-loadingelement-loading-backgroundrgba(0, 0, 0, 0.8)div classblock v-forfd in folder_datael-card :body-style{ padding: 0px }div classfolderImg :classfd.type i classel-icon-folder-opened avatar-uploader-icon/i/div/el-card/div/div
/templatescriptimport axios from axios
export default {name: showdatafolder,inject: [reload],data() {return {folder_data: [],loading: false,url: https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg}},mounted() {axios({url: /api/datamanage_get_folder_list,method: get,}).then((res) {this.folder_datares.data;});},
}
/script2.2 列表堆叠的下拉菜单
在vue中任何控件所所绑定的事件是设置为变量的故此在v-for中产生的多个el-dropdown只能绑定到同一个事件。虽然el-dropdown绑定的事件是固定的但是每个for循环中el-dropdown-item所绑定的command可以是动态的其支持将for训练时的变量信息与字符串相结合。 具体用例如下
templatediv classdemo-imagev-loadingloadingelement-loading-text等待服务器处理中element-loading-spinnerel-icon-loadingelement-loading-backgroundrgba(0, 0, 0, 0.8)div classblock v-forfd in folder_datael-card :body-style{ padding: 0px }div classfolderImg :classfd.type clickto_url(showimglist,fd.name)i classel-icon-folder-opened avatar-uploader-icon/i/divdiv stylepadding: 4px;time classtime{{ fd.name }}/timebr /span数量: {{ fd.labelnum }} / {{ fd.imgnum }} /spanel-dropdown commandhandleCommandspan classel-dropdown-link操作i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item :commandimage_resize| fd.name iconel-icon-picture图像resize/el-dropdown-itemel-dropdown-item :commandsplit_dataset| fd.name iconel-icon-help划分数据集/el-dropdown-itemel-dropdown-item :commanddata_analysis| fd.name iconel-icon-s-tools数据集分析/el-dropdown-itemel-dropdown-item :commanddraw_label| fd.name iconel-icon-s-tools数据可视化/el-dropdown-itemel-dropdown-item :commanddelete_label| fd.name iconel-icon-s-tools删除可视化/el-dropdown-item/el-dropdown-menu/el-dropdowndiv classbottom clearfixel-button typetext classbutton clickto_url(labelimg,fd.name) 标注/el-buttonel-button typetext classbutton clickdelete_folder(fd.name)删除/el-button/div/div/el-card/div/div
/templatescriptimport axios from axios
export default {name: showdatafolder,inject: [reload,callServerApi],data() {return {folder_data: [],loading: false,url: https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg}},mounted() {axios({url: /api/datamanage_get_folder_list,method: get,}).then((res) {this.folder_datares.data;});},methods: {handleCommand(command) {var list command.split(|);var func list[0];var dataset list[1];if (func image_resize) {this.callServerApi(datamanage_resize_img,{dname:dataset})} else if (func split_dataset) {this.callServerApi(datamanage_splitdata,{dname:dataset})} else if (func draw_label) {this.callServerApi(datamanage_dataanalysis,{dname:dataset,viewdata:true,target:showimglist})} else if (func data_analysis) {this.callServerApi(datamanage_dataanalysis,{dname:dataset,target:showanalysis})} else if (func delete_label) {this.callServerApi(datamanage_dataanalysis,{dname:dataset,clear:true})}},},
}
/script关键操作如下每个el-dropdown-menu中子控件所绑定的事件存在同异性相同顺序的el-dropdown-item中command指令的前部分是一样后部分不同同一个for循环中的el-dropdown-item中的command的后部分是相同。也就是说一个command指令中包含了指令和父控件信息通过 | 分割原始指令后即可得到指令和操作对象信息
div classblock v-forfd in folder_datael-dropdown commandhandleCommandspan classel-dropdown-link操作i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item :commanddata_analysis| fd.name iconel-icon-s-tools数据集分析/el-dropdown-itemel-dropdown-item :commanddata_split| fd.name iconel-icon-s-tools数据集划分/el-dropdown-item/el-dropdown-menu
/div基于此所实现的指令事件如下先对原始指令进行分割设定第一部分为指令内容第二部分为操作对象。基于此可以区分出列表堆叠时各个下拉菜单要操作的对象。 handleCommand(command) {var list command.split(|);var func list[0];var dataset list[1];if (func image_resize) {this.callServerApi(datamanage_resize_img,{dname:dataset})} else if (func split_dataset) {this.callServerApi(datamanage_splitdata,{dname:dataset})} else if (func draw_label) {this.callServerApi(datamanage_dataanalysis,{dname:dataset,viewdata:true,target:showimglist})} else if (func data_analysis) {this.callServerApi(datamanage_dataanalysis,{dname:dataset,target:showanalysis})} else if (func delete_label) {this.callServerApi(datamanage_dataanalysis,{dname:dataset,clear:true})}},最终所实现的业务界面效果如下
三、表格中的下拉菜单
3.1 表格使用
在表格中基于 template slot-scopescope xxx /template格式可以指定格式化的内容具体可以参考https://element.faas.ele.me/#/zh-CN/component/table 中的自定义列模板
这里的el-dropdown-item的:command设置与章节2类似将额外信息通过 | 连接。不同的是使用了v-for来生成多个el-dropdown-item。以下代码中切换类型所绑定的事件为changeTableLabel事件 el-table :datatableData height600 stylewidth: 150px highlight-current-rowcurrent-changehandleTableCurrentChangeel-table-column typeindex label编号 width40/el-table-columnel-table-column proplabel label类型 width110 aligncentertemplate slot-scopescopeel-dropdown commandchangeTableLabelspan classel-dropdown-link{{ scope.row.label }}i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item v-fortag in dynamicTags :commandscope.row.id | tag{{ tag}}/el-dropdown-item/el-dropdown-menu/el-dropdownel-button clickdeleteTableRow(scope.row.id) typetext sizesmall删除/el-button/template/el-table-column/el-table3.2 事件实现
在changeTableLabel函数中对参数进行split操作从一个参数中解析出多个信息。其第一个信息用于描述操作的行第二个信息用于描述所设置的值。 //修改table中label的值changeTableLabel(command) {var list command.split(|);var tagId list[0];//获取参数中的第一个信息 用于区分操作的行var newCls list[1];//获取参数中的第二个信息 用于设置具体的值//使用信息//更新表格中的label值for (let i 0; i this.tableData.length; i) {if (this.tableData[i].id tagId) {this.tableData[i].label newCls;}}this.label_changed true;//更新ailabel中绘图中的类型和颜色this.$message(tagId --- newCls);}
