使用vant实现多选

boomshuai

已于 2023-06-01 14:44:35 修改

阅读量3.5k

点赞数 4

文章标签： css html javascript

于 2023-06-01 14:42:16 首次发布

本文链接：https://blog.csdn.net/m0_72098783/article/details/130987206

版权

直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./vant2.12.index.css" />
  <script src="./vue.js"></script>
  <script src="./vant.min.js"></script>
  <style>
    select-checkbox {
      position: absolute;
      right: 0;
    }

    .select-popup-footer {
      margin-top: 10px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
    }

    .btn {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
    }

    .cancle {
      font-size: 18px;
    }

    .confirm {
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div style="width: 100%; height: 100vh">
      <van-cell-group>
        <van-field required readonly clickable name="检查人员" :rules="[{ required: true, message: '不能为空' }]"
          :value="hidden.yhpcr" label="检查人员 ：" placeholder="点击选择检查人员" required @click="fn()"></van-field>
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
          <div style="position: sticky;top: 0;background-color: #fff;width: 100%;padding: 10px;z-index: 1;">
            <div class="btn">
              <div @click="cancel" class="cancle">取消</div>
              <div @click="confirm" class="confirm">确定</div>
            </div>
            <van-search v-model="jcry" show-action placeholder="请输入搜索关键词" @search="onSearch" @input="delaySearch">
              <template #action>
                <div @click="onSearch">搜索</div>
              </template>
            </van-search>
          </div>
          <van-checkbox-group v-model="result">
            <van-cell-group>
              <van-cell v-for="(item, index) in list2" :key="item.index" clickable :key="item" :title="item.userName"
                @click="toggle(index)">
                <template #right-icon>
                  <van-checkbox :name="item" ref="checkboxes" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </van-popup>
      </van-cell-group>
    </div>
  </div>
  <script>
    var app = new Vue({
      el: "#app",
      data () {
        return {
          value: "",
          jcry: '',
          hidden: {
            yhpcr: '薛苗',
            yhpcrid: ''
          },
          list: [
            {
              departmentName: "乙烯部",
              loginName: "2018091001",
              mobile: "13919836227",
              orgCname: "设备工程师",
              orgId: " ea483ec167d356b757afaqf86297d02",
              userId: "2018091001",
              userName: "薛苗",
            },
            {
              departmentName: "乙烯部",
              loginName: "2019060519",
              mobile: "18320688010",
              orgCname: "设备工程师",
              orgId: " ea483ec167d356b757afaqf86297d02",
              userId: "2019060519",
              userName: "张士印",
            },
            {
              departmentName: "乙烯部",
              loginName: "2020050905",
              mobile: "18736911293",
              orgCname: "设备工程师",
              orgId: " ea483ec167d356b757afaqf86297d02",
              userId: "2020050905",
              userName: "宋成才",
            },
            {
              departmentName: "乙烯部",
              loginName: "2020091903",
              mobile: "15706185110",
              orgCname: "设备工程师",
              orgId: " ea483ec167d356b757afaqf86297d02",
              userId: "2020091903",
              userName: "石天天",
            },
          ],
          list2: [],
          result: [],
          show: false,
          houseutilizationValue1: "",
        };
      },
      created () {
        this.list2 = this.list
        //模拟有默认选中
        this.result = this.list.filter(item => {
          const userNames = this.hidden.yhpcr.split(",");
          return userNames.includes(item.userName);
        });
      },
      methods: {
        fn () {
          this.show = true;
        },
        toggle (index) {
          this.$refs.checkboxes[index].toggle();
        },
        onSearch () {
          this.list2 = this.list.filter(item => item.userName.includes(this.jcry));
        },
        delaySearch () { },
        //取消按钮
        cancel () {
          this.show = false
        },
        //确定按钮
        confirm () {
          console.log(this.result);
          const userNames = this.result.map(item => item.userName);
          const userIds = this.result.map(item => item.userId);
          this.hidden.yhpcr = userNames.join(",");
          this.hidden.yhpcrid = userIds.join(",");
          console.log(this.hidden.yhpcr, this.hidden.yhpcrid);
          this.houseutilizationValue1 = this.hidden.yhpcr
          this.show = false
          this.jcry = ''
        },
      },
    });
  </script>
</body>

</html>

这样基本上技能完成多选及搜索功能，主要是你的选项不多的情况下都是可以使用的。

但是如果你的选项比较多，而且是向后端发请求的，那么这个就会有问题。

比如这样，每次后台不是给所有的人，要是给所有会贼卡，这种情况的话，你搜索完，点击确定，然后你要搜索另一个人，再选上，点击确认，会发现之前选上的人没了。

这时候你就需要再toggel函数里面来上这段，当然要新建个arr，来存放选中的数据

 toggle (item, index) {
                    vm.$refs.checkboxes[index].toggle();
                    // 使用 findIndex 查找数组中是否已经存在相同的元素
                    const idx = this.arr.findIndex(ele => ele.loginName === item.loginName);
                    if (idx > -1) {
                        // 如果数组中已经存在该元素，则将其删除
                        this.arr.splice(idx, 1);
                    } else {
                        // 否则将其添加到数组中
                        this.arr.push(item);
                    }
                },

最后在也要修改一下confirm

 confirm () {
                    this.result=this.arr//先把arr给result
                    const userNames = this.result1.map(item => item.userName);
                    const userIds = this.result1.map(item => item.userId);
                    this.houseutilizationValue1 = userNames.join(",");
                    this.jcryid = userIds.join(",");
                    this.show = false
                    this.jcry = ''
                },

当然点击搜索之后不选中的问题

                   var eiInfo = new EiInfo();
                    eiInfo.set('userName', vm.jcry)
                    EiCommunicator.send("PMXK102","queryUserList",eiInfo,{
                        onSuccess: function (ei) {
                            let res = ei.get('data')
                            vm.houseutilizationColumns=res
                            vm.result = vm.list.filter(item => {
                                const userNames = vm.houseutilizationValue1.split(",");
                                return userNames.includes(item.userName);
                            });
                        }
                    })

讲究看一下吧，有的地方可能没说明白

boomshuai

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
使用vant实现多选

比如这样，每次后台不是给所有的人，要是给所有会贼卡，这种情况的话，你搜索完，点击确定，然后你要搜索另一个人，再选上，点击确认，会发现之前选上的人没了。这时候你就需要再toggel函数里面来上这段，当然要新建个arr，来存放选中的数据。这样基本上技能完成多选及搜索功能，主要是你的选项不多的情况下都是可以使用的。但是如果你的选项比较多，而且是向后端发请求的，那么这个就会有问题。讲究看一下吧，有的地方可能没说明白。最后在也要修改一下confirm。当然点击搜索之后不选中的问题。
复制链接

扫一扫