几级英语可以做外贸网站seo,四川航天中瑞建设工程有限公司网站,用vs做html网站,受欢迎的菏泽网站建设文章目录 项目场景#xff1a;实现效果认识组件代码效果分析 封装#xff1a;代码封装思路页面中使用 项目场景#xff1a;
在选择数据的时候需要在已选择的数据中对比选择#xff0c;具体就是点击一个按钮#xff0c;弹出一个小的弹出框#xff0c;但不像对话框那样还需… 文章目录 项目场景实现效果认识组件代码效果分析 封装代码封装思路页面中使用 项目场景
在选择数据的时候需要在已选择的数据中对比选择具体就是点击一个按钮弹出一个小的弹出框但不像对话框那样还需要增加一个遮罩层更加的轻量化但是需要查看的数据很多需要一个列表来展示列表的话还需要一个筛选功能。
我的思路是增加复选框列将选择的内容插入到外部的列表中我这里主要是分享弹出框内置列表的一个封装思路。 但是在这当中还会设计到列表、分页的方法所以建议先搞清楚列表以及分页在来看这些我之前的文章都有涉及。 实现效果 认识组件
老样子先根据Element的官方文档认识一下Popover 弹出框
代码
el-popoverplacementrightwidth400triggerclickel-table :datagridDatael-table-column width150 propertydate label日期/el-table-columnel-table-column width100 propertyname label姓名/el-table-columnel-table-column width300 propertyaddress label地址/el-table-column/el-tableel-button slotreferenceclick 激活/el-button
/el-popoverscriptexport default {data() {return {gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}]};}};
/script效果 分析
这个是一个基础的Popover 弹出框在这当中我们要用到的方法、函数有
placement出现位置 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endwidth弹出框宽度800 最小宽度 150pxpopper-class为 popper 添加类名popovershow显示时触发handlePopoverShowv-model状态是否可见visibletrigger触发方式click/focus/hover/manual
这些就是在Popover 弹出框中要用到的内置方法及函数 封装
代码
!-- component:Popover弹出框(内置列表)time:2023/08/10placement:位置popoverText:按钮文字popoverIcon:按钮图表tableType:MultipleChoice(单选)、CheckBox(多选)tableData:列表数据tableConfig:列表配置loading开启列表加载totalNum分页总数width宽度handlePopoverShow弹出框显示触发handleSizeChange分页条数handleCurrentChange分页页数handleSelectData:确定触发事件--
templatediv classpopoverel-popover:placementplacement:widthwidthpopper-classpopovershowhandlePopoverShowv-modelvisibletriggerclickel-form refPopoverQuery label-width80px classPopoverQueryel-card shadowhoverel-form-item :label$t(query_condition) classPopoverQuery-FormItemel-input classPopoverQuery-Input :placeholderplaceholder/el-inputel-button sizemini iconel-icon-search{{$t(Query)}}/el-button/el-form-item/el-card/el-formTable reftable :totaltotalNum handleSizeChangehandleSizeChange handleCurrentChangehandleCurrentChange :loadingloading :tableDatatableData :tableConfigtableConfig :tableTypetableType RowClicktableRowClick HandleSelectionChangeselectionChange/Tablediv classmar-top-10 styleoverflow: hidden;!-- 单选清空 --el-button sizemini classFloatRight iconel-icon-refresh clickEmptyTableSelectStatus(MultipleChoice) v-iftableTypeMultipleChoice{{ $t(empty) }}/el-button!-- 多选清空 --el-button sizemini classFloatRight iconel-icon-circle-close clickcancel(CheckBox) v-else{{ $t(Cancel) }}/el-buttonel-button sizemini typesuccess classcard-title-button clickhandleSelectData stylemargin-right:10px iconel-icon-circle-check{{ $t(determine) }}/el-button/divel-button sizemini classcard-title-button :iconpopoverIcon slotreference{{ popoverText }}/el-button/el-popover/div/templatescript
import Table from /components/table/index.vue
export default {components:{Table},data() {return {visible:false, selectData:[] //复选框选择的数据};},props:{popoverText:{default(){return [];}},popoverIcon:{default(){return [];}},tableData:{default(){return [];}},tableConfig:{default(){return [];}},tableType:{default(){return [];}},loading:{type:Boolean,default: false},width:{type:String,default:500,},totalNum:{type:Number,default:0},placement:{type:String,default:bottom},placeholder:{type:String,default:,}},methods:{tableRowClick(row,type){ //单选列表行点击事件console.log(type,row);},selectionChange(row){ //多选列表复选框点击事件this.selectData row},cancel(){ this.visible false},handlePopoverShow(){ //弹出框显示触发this.$emit(handlePopoverShow,true)},handleSizeChange(val) { //分页条数this.$emit(handleSizeChange,val)},handleCurrentChange(val) { //分页页数this.$emit(handleCurrentChange,val)},handleSelectData(){ //确认触发事件this.$emit(handleSelectData,this.selectData)this.visible false}}
};
/scriptstyle langscss scoped
.popover{float: right;padding-bottom: 0px;
}
.PopoverQuery{overflow: hidden;-FormItem{margin-bottom: 0px;}-Input{float: left;width: 70%;margin-right: 10px;}
}
::v-deep .el-table__header-wrapper{position: sticky;top: -12px;z-index: 9;
}
::v-deep .el-table__body-wrapper {height: 310px;overflow-y: scroll;
}
/style这里我们要用到的字段除了上述的还有很多因为这个是内置了三个组件的封装组件。
封装思路
placement:位置popoverText:按钮文字popoverIcon:按钮图表width宽度tableType:MultipleChoice(单选)、CheckBox(多选)tableData:列表数据tableConfig:列表配置loading开启列表加载totalNum分页总数handlePopoverShow弹出框显示触发handleSizeChange分页条数handleCurrentChange分页页数handleSelectData:确定触发事件
首先是将placement,popoverText,popoverIcon,tableType,width传给组件定义按钮的样式,类型点击按钮触发handlePopoverShow函数,将事件传给页面页面开始请求接口这时会将loading该为开启状态后端回传数据后将loading状态重置在将tableData,tableConfig,totalNum传给组件此时列表中已经可以查看到数据了最后handleSelectData在执行剩下的逻辑
我这里面还嵌入了一个form表单来作为数据的校验但是还没写全其实就是按照正常的form表单验证写就行了
页面中使用 //调用示例Popover stylefloat: left;height: 28px;placementright:popoverTextthis.$t(add_product_details) popoverIconel-icon-thumb:tableDataproductTableData :tableConfigproductTableConfig:tableTypeCheckBox:loadingproductTableloading:totalNumpaging.totalNumwidth800handlePopoverShowgetFirstLegOrderloghandleSizeChangehandleSizeChangehandleCurrentChangehandleCurrentChangehandleSelectDatahandleSelectData/Popover
