Article directory
Project scenario:
When selecting data, you need to compare the selections among the selected data. Specifically, click a button to pop up a small pop-up box, but unlike the dialog box, you need to add a mask layer. It is more lightweight, but it needs to be viewed. A lot of data needs to be displayed in a list, and a filtering function is also needed for the list.
My idea is to add a checkbox column and insert the selected content into an external list. Here I mainly share an encapsulation idea for the built-in list of the pop-up box.
However, lists and paging methods will also be designed, so it is recommended to first understand the list and paging before taking a look. These are all covered in my previous articles.
achieve effect
Know the components
As always, let’s first get to know the Popover pop-up box based on Element’s official documentation.
code
<el-popover
placement="right"
width="400"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label="日期"></el-table-column>
<el-table-column width="100" property="name" label="姓名"></el-table-column>
<el-table-column width="300" property="address" label="地址"></el-table-column>
</el-table>
<el-button slot="reference">click 激活</el-button>
</el-popover>
<script>
export 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>
Effect
analyze
This is a basic Popover popup box. The methods and functions we will use in it are:
- placement：出现位置 ：top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
- width: Pop-up box width: 800 (minimum width 150px)
- popper-class: Add a class name to popper: popover
- show: Triggered when displaying: handlePopoverShow
- v-model: Whether the status is visible: visible
- trigger: trigger method: click/focus/hover/manual
These are the built-in methods and functions used in Popover pop-up boxes.
Package:
code
<!--
component:Popover弹出框(内置列表)
time:2023/08/10
placement:位置
popoverText:按钮文字
popoverIcon:按钮图表
tableType:MultipleChoice(单选)、CheckBox(多选)
tableData:列表数据
tableConfig:列表配置
loading：开启列表加载
totalNum：分页总数
width：宽度
handlePopoverShow：弹出框显示触发
handleSizeChange：分页条数
handleCurrentChange：分页页数
handleSelectData:确定触发事件
-->
<template>
<div class="popover">
<el-popover
:placement="placement"
:width="width"
popper-class="popover"
@show="handlePopoverShow"
v-model="visible"
trigger="click">
<el-form ref="PopoverQuery" label-width="80px" class="PopoverQuery">
<el-card shadow="hover">
<el-form-item :label="$t('query_condition')" class="PopoverQuery-FormItem">
<el-input class="PopoverQuery-Input" :placeholder="placeholder"></el-input>
<el-button size="mini" icon="el-icon-search">{
{
$t('Query')}}</el-button>
</el-form-item>
</el-card>
</el-form>
<Table ref="table" :total="totalNum" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :loading="loading" :tableData="tableData" :tableConfig="tableConfig" :tableType="tableType" @RowClick="tableRowClick" @HandleSelectionChange="selectionChange"></Table>
<div class="mar-top-10" style="overflow: hidden;">
<!-- 单选清空 -->
<el-button size="mini" class="FloatRight" icon='el-icon-refresh' @click="EmptyTableSelectStatus('MultipleChoice')" v-if="tableType=='MultipleChoice'">{
{
$t('empty') }}</el-button>
<!-- 多选清空 -->
<el-button size="mini" class="FloatRight" icon='el-icon-circle-close' @click="cancel('CheckBox')" v-else>{
{
$t('Cancel') }}</el-button>
<el-button size="mini" type="success" class="card-title-button" @click="handleSelectData" style="margin-right:10px" icon='el-icon-circle-check'>{
{
$t('determine') }}</el-button>
</div>
<el-button size="mini" class="card-title-button" :icon='popoverIcon' slot="reference">{
{
popoverText }}</el-button>
</el-popover>
</div>
</template>
<script>
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
}
}
};
</script>
<style lang="scss" 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>
There are many fields we need to use here in addition to the above, because this is an encapsulated component with three built-in components.
Encapsulation ideas
- placement: location
- popoverText: button text
- popoverIcon: button chart
- width: width
- tableType:MultipleChoice (single choice), CheckBox (multiple choice)
- tableData: list data
- tableConfig: list configuration
- loading: enable list loading
- totalNum: total number of pages
- handlePopoverShow: Pop-up box display trigger
- handleSizeChange: Number of paging items
- handleCurrentChange: Number of paging pages
- handleSelectData: determine the trigger event
- First, pass
placement,popoverText,popoverIcon,tableType,widthto the component to define the style and type of the button - Click the button to trigger the
handlePopoverShowfunction, pass the event to the page, and the page starts to request the interface. At this time,loadingwill be turned on - After the backend returns the data, reset the
loadingstatus and passtableData,tableConfig,totalNumto the component. At this time, the data can be viewed in the list. - Finally
handleSelectDataexecutes the remaining logic
I have also embedded a form here to verify the data, but I haven’t written it all yet. In fact, I just need to write it according to the normal form verification.
Used in the page
//调用示例
<Popover
style="float: left;height: 28px;"
placement="right"
:popoverText="this.$t('add_product_details')"
popoverIcon="el-icon-thumb"
:tableData="productTableData"
:tableConfig="productTableConfig"
:tableType="'CheckBox'"
:loading="productTableloading"
:totalNum="paging.totalNum"
width="800"
@handlePopoverShow="getFirstLegOrderlog"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
@handleSelectData="handleSelectData"
>
</Popover>