vue列表穿梭框,可进行前端查询

已于 2024-04-17 18:30:57 修改
阅读量313 收藏
点赞数 2
文章标签： 前端 vue.js javascript
于 2024-04-17 18:04:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxi_happy/article/details/137882913
版权
文章描述了一个使用Vue编写的组件，展示了如何在表格中进行多条件查询和动态管理通知人员列表，包括用户账号、姓名、组织和岗位筛选，以及添加和删除操作。
摘要由CSDN通过智能技术生成 
// 这是组件,可以直接用
<template>
    <div class="box">
        <el-row>
            <el-col :span="11">
                <div class="box_left">
                    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery" labelWidth="80px">
                        <el-col :span="12">
                            <el-form-item label="用户账号:" prop="userName">
                                <el-input v-model="queryParams.userName" clearable placeholder="请输入用户账号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户姓名:" prop="nickName">
                                <el-input v-model="queryParams.nickName" clearable placeholder="请输入用户姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="组织名称:" prop="deptName">
                                <el-input v-model="queryParams.deptName" clearable placeholder="请输入组织名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="岗位:" prop="postName">
                                <el-input v-model="queryParams.postName" clearable placeholder="请输入岗位"></el-input>
                            </el-form-item>
                        </el-col>
                    </SearchContent>
                    <el-table  :row-key="(row) => row.userId" ref="multipleTable"  :data="allDataList"  @selection-change="selectionChange" border>
                            <el-table-column type="selection" width="45"></el-table-column>   
                            <el-table-column label="用户账户" align="center" prop="userName"
                                show-overflow-tooltip />
                            <el-table-column label="用户姓名" align="center" prop="nickName" 
                                show-overflow-tooltip />
                            <el-table-column label="组织名称" align="center" prop="deptName" 
                                show-overflow-tooltip />
                            <el-table-column label="岗位" align="center" prop="postName" 
                                show-overflow-tooltip />
                            <el-table-column label="手机号码" align="center" prop="phonenumber" 
                                show-overflow-tooltip />   
                    </el-table>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="box_center">
                    <div class="box_btn">
                        <el-button type="primary" icon="el-icon-arrow-right" @click="inputAdd"></el-button>
                        <el-button type="primary" icon="el-icon-arrow-left" @click="inputDelet"></el-button>
                    </div> 
                </div>
            </el-col>
            <el-col :span="11">
                <div class="box_left">
                    <SearchContent :queryParams="queryParams1" @query="handleQuery1" @reset="resetQuery1" labelWidth="80px">
                        <el-col :span="12">
                            <el-form-item label="用户账号:" prop="userName">
                                <el-input v-model="queryParams1.userName" clearable placeholder="请输入用户账号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户姓名:" prop="nickName">
                                <el-input v-model="queryParams1.nickName" clearable placeholder="请输入用户姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="组织名称:" prop="deptName">
                                <el-input v-model="queryParams1.deptName" clearable placeholder="请输入组织名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="岗位:" prop="postName">
                                <el-input v-model="queryParams1.postName" clearable placeholder="请输入岗位"></el-input>
                            </el-form-item>
                        </el-col>
                    </SearchContent>
                    <el-table  :row-key="(row) => row.userId" ref="multipleTable1"  :data="allDataList1"  @selection-change="selectionChange1" border>
                            <el-table-column type="selection" width="45"></el-table-column>     
                            <el-table-column label="用户账户" align="center" prop="userName"
                                show-overflow-tooltip />
                            <el-table-column label="用户姓名" align="center" prop="nickName" 
                                show-overflow-tooltip />
                            <el-table-column label="组织名称" align="center" prop="deptName" 
                                show-overflow-tooltip />
                            <el-table-column label="岗位" align="center" prop="postName" 
                                show-overflow-tooltip />
                            <el-table-column label="手机号码" align="center" prop="phonenumber" 
                                show-overflow-tooltip />   
                    </el-table>
                </div>
            </el-col>
        </el-row>     
    </div>
</template>
<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as apis from "@/api/messageManagement/index.js";
import { create } from "lodash";
    export default{
        name:'NoticeModle',
        components: {
            SearchContent,
        },
        props:{
            info:{
                type: Array,
                default: () => [], 
            }
        },
        data(){
            return{
                queryParams:{ 
                    userName:'',
                    nickName:'',
                    deptName:'',
                    postName:'',},
                // 所有数据
                allDataList:[],
                queryParams1:{
                    userName:'',
                    nickName:'',
                    deptName:'',
                    postName:'',
                },
                // 选中所有数据
                allDataList1:[],
                //暂存选中数据
                list:[],
                list1:[],
                olderList:[],
            }
        },
        mounted(){
            this.getList()
        },
        methods:{
            handleQuery(){
                this.getList()
            },
            resetQuery(){
                this.queryParams={
                    userName:'',
                    nickName:'',
                    deptName:'',
                    postName:'',
                }
            },
            handleQuery1(){
                this.olderList = JSON.parse(JSON.stringify(this.allDataList1))
                const obj ={
                    userName:this.queryParams1.userName,
                    nickName:this.queryParams1.nickName,
                    deptName:this.queryParams1.deptName,
                    postName:this.queryParams1.postName,
                }
                let arr = JSON.parse(JSON.stringify(this.allDataList1))
                for (const item in obj) {
                    arr = arr.filter((row) =>{ 
                        return obj[item]?row[item].includes(obj[item]):true;
                    })
                    this.allDataList1 = arr
                } 
            },
            resetQuery1(){
                this.queryParams1={
                    userName:'',
                    nickName:'',
                    deptName:'',
                    postName:'',
                }
                this.allDataList1 = this.olderList
            },
            // 获取人员
            getList(){
                apis.getNoticePersion(this.queryParams).then((res)=>{
                    if(res.code==200){
                        this.allDataList = res.data
                        // 回显选中的人员
                        if(this.info){
                            this.info.map((res)=>{
                                res.data.map((item)=>{
                                    if(res.userId==item.userId){
                                        this.allDataList1.push(item)
                                    }
                                })
                                
                            })
                        }
                    }
                })
            },
            // 左侧人员选中
            selectionChange(id){
                this.list = []
                console.log(id,'selectionChangeselectionChangeselectionChange')
                this.list = id
            },
            // 右侧人员选中
            selectionChange1(id){
                console.log(id,'111111')
                this.list1 = []
                this.list1 = id
            },
            // 添加通知人员
            inputAdd(){
                 let jsonArray = [...this.list,...this.allDataList1]
                 this.allDataList1 = Array.from(new Set(jsonArray.map(JSON.stringify)), JSON.parse);
                 this.$refs.multipleTable.clearSelection()
                 this.$emit('valueChanged', this.allDataList1)
            },
            // 删除通知人员
            inputDelet(){
                if(this.list1){
                    this.list1.map((res)=>{
                    this.allDataList1.map((item,index)=>{
                        if(res.userId==item.userId){
                            this.allDataList1.splice(index,1)
                            this.$refs.multipleTable1.clearSelection()
                        }
                    })
                })
                }    
            },

        },
    }
</script>
<style scoped lang="scss">
    .box{
        width: 100%;
        display: flex;
        .box_left{
            width: 100%;
            height: 500px;
            overflow-y: auto;
        }
        .box_center{
            width: 100%;
            height: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .box_btn{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content:space-between;
                height: 80px;
            }
            .el-button + .el-button{
                margin: 0 !important;
            }
        }
    }
</style>

//父页面
<el-col :span="20">
   <el-form-item label="通知人员:" prop="receiveId">
         <span class="noticeColor">已添加(</span>
         <span class="noticeColor">{{ noticeNum }}</span>
         <span class="notice noticeColor">)人</span>
         <span class="notice noticeColor" @click="addNotice">添加通知人员</span>
         <span class="notice noticeColor" @click="clearNotice">清空</span>
     </el-form-item>
 </el-col>
 //弹框
 <el-dialog
  width="60%"
     title="通知人员"
     :visible.sync="noticeState"
     append-to-body>
         <NoticeModle :info="noticeInfo" @valueChanged="handleValueChange" />
     <div slot="footer">
         <el-button @click="noticeCancel">取消</el-button>
         <el-button :loading="buttonLoading" type="primary" @click="noticeSubmitForm" >确 定</el-button>
     </div>
 </el-dialog>
 //事件
  //选中通知人员
    handleValueChange(val){
         this.noticeInfo = val
      },
  //选择通知人员弹框-关闭
        noticeSubmitForm(){
            this.noticeState = false
            let list =[]
            if(this.noticeInfo){
                this.noticeInfo.map((res)=>{
                    list.push(res.userId)
                })
                this.noticeNum = this.noticeInfo?.length
            }
            this.$set(this.form,'receiveId',list.join(','))
        },

在这里插入图片描述

liuxi_happy
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Element-ui 封装穿梭框（左侧树 右侧列表，可全选，列表可拖拽）
Alice_hhu的博客
07-04 8237
基于 Element-ui自己写了一个左边是树结构，右边是列表结构的穿梭框，有全选功能，右侧列表可拖拽
jQuery左右列表按钮控制穿梭框
11-17
jQuery左右列表按钮控制穿梭框
antd的穿梭框a-transfer实现：树形列表，父节点多选，子节点单选，父子节点联动
最新发布
m0_56065511的博客
05-07 587
穿梭框左边的列表需要满足父子节点联动：勾选子节点时默认选中父节点，选中父节点时默认勾选子节点（初次默认选中第1个子节点，否则选中上次勾选的子节点），取消勾选父节点同时取消勾选的子节点；1，穿梭框中为树形列表，a-transfer + a-table（table 数据为treeData）；穿梭到右边的列表不需要父子节点联动，穿梭过去时需要保留子节点选中状态，同时父节点清空选中状态。2，父节点为多选，子节点是单选。
vue+element ui表格穿梭框
weixin_42555643的博客
07-07 3456
vue+element ui表格穿梭框
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
weixin_30455023的博客
09-20 1388
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/component/transfer 直接上代码 <template> <div class="auth-user-list"> <el-breadcrumb separ...
查询穿梭框实现
艾米栗的代码天地
06-26 428
技术栈： 使用vue3 的composition api 和 tsx 进行开发。
vue/element穿梭框组件
03-08
vue/element穿梭框组件
Vue实现穿梭框效果
10-14
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个功能丰富的穿梭框（Transfer Box）组件。穿梭框通常用于在两个列表之间转移数据，常见于数据筛选和分组的场景。我们将通过分析给出的示例代码，理解其关键组件...
前端经典——vue实现穿梭框demo.rar
11-29
"前端经典——vue实现穿梭框demo"这个项目是基于Vue.js的一个示例，旨在展示如何利用Vue来构建一个功能完备的穿梭框组件。穿梭框，又称为选择框或数据迁移框，通常用于在两个列表之间移动数据，常用于权限设置、角色...
前端 elementUI 穿梭框大量数据分页处理
03-03
总的来说，处理大量数据的穿梭框问题，我们需要结合前端工程的最佳实践，如分页、虚拟滚动、延迟加载等，同时充分利用Vue和ElementUI提供的特性，来提高组件的性能和用户体验。`myTransfer`资源为此提供了一个可行的...
树形穿梭框
10-08
在IT行业中，树形穿梭框（Tree Transfer）是一种常见的用户界面元素，特别是在Web开发中，尤其是在使用Vue.js这样的前端框架时。它被广泛应用于数据管理、权限分配、目录选择等场景，因为它能清晰地展示层级关系，并...
Element el-transfer 穿梭框详解
程序员大阳
10-15 1万+
本文目录1. 前言2. 基本用法3. 可搜索4. 自定义标题和按钮的文本5. 设置数据项别名6. 小结 1. 前言 穿梭框就是左右各有一个复选框列表，可以将左侧选中的项目移动到右边，后者将右侧的选中项移回左边的控件。 一般用于物品交接等场景，本篇就来介绍下穿梭框的用法。 2. 基本用法 先看代码： 基本用法:{{value}} <el-transfer v-model="value" :data="preData" @change="selectChange"></el-tran
el-transfer 穿梭框
royya_buli的博客
05-18 783
el-transfer 穿梭框
基于bootstrapTable穿梭框
热门推荐
liwg123的博客
01-22 2万+
7.24全部更新了一下  增加了通过url获取数据 增加了刷新数据的方法（都是针对数据源为同一个） 另外新增了数据源为两个时  刷新左侧 和右侧数据的方法 ————————————————————————以下原文—————————————————————————— 封装了一个基于bootstrapTable穿梭框，可支持两个表格穿梭（其实本身就是），有需求的可看下。 Dom下载地址下载地址...
element穿梭框的输入框通过对接口返回多个值进行筛选显示
a1120590091的博客
12-23 1990
3实现要求：输入框内容并没有显示在穿梭框的label中 但是可以进行搜索显示 实现过程 1.在穿梭框上设置 :filter-method="filterMethod"方法 <el-transfer v-model="form.hosIds" filterable :props="{ key: 'sourceId', label: 'name', }" :filter-method="filterMethod" :data="hospitalList" :titles="[`${$t('mess
vue-element-列表穿梭框
qq_38985444的博客
07-01 997
<div class="center-box"> <div class="c-left"> <span class="c-title">案件列表</span> <div class="list-box"> <div @click="listClick(i,index,'left')" v-for="(i,index) in caseLeftList" :key..
HTML+CSS 实现穿梭框 表格实例
qrn196789910的博客
06-11 1792
先大概说下我要弄的功能吧，其实也很简单就是根据条件搜索，然后弄一个表格展示，点击选中后向右移动，就是选中，然后就提交，大概就这样的功能，看看我画的原型图吧。 大概意思就这样，其实很简单，但是问题就在于穿梭框有点难实现，主要是可能对于后端开发来说就是自己不太懂，无法实现，然后我百度了一波例子，自己用于改造了一下就可以用了，我们来看看写的啥样子吧 感觉就这样吧，方正自己也不是专业的，也没有设计就只能做成这样了，好了直接贴代码吧。 <html> <head> <meta
Vue 仿Transfer 穿梭框功能实现人员选择,左侧备选列表,右侧已选列表,带搜索带备注项
疑问 搜索 动手 解决 记录
06-09 4066
Vue 仿Transfer 穿梭框功能实现人员选择,左侧备选列表,右侧已选列表,带搜索带备注项
vue 穿梭框可查询
07-28
Vue的穿梭框（Transfer）组件通常用于在两个列表之间进行数据的转移和选择。如果你想要在穿梭框中添加搜索功能，可以使用Vue的计算属性和过滤器来实现。 首先，你可以在穿梭框组件中添加一个输入框，用于输入搜索...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值