Vue多行选择栏的实现

离逝的枫

已于 2022-12-13 13:04:38 修改

阅读量596

点赞数

分类专栏：导航栏文章标签： javascript 前端 vue.js

于 2022-12-04 09:21:25 首次发布

本文链接：https://blog.csdn.net/qq_51130780/article/details/128168086

版权

导航栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端实现多行选择跳转获取对应数据

单行选项栏
多行选择列表

其实在项目开发的过程中，大多数情况下都是后端返回给前端数据，前端能做的就只是拿着数据进行遍历，且当用户点击时，根据用户点击的数据项，像后端发送相关的请求，重新获取数据。其中的选项栏便是一个重点，如何知道用户点击的是哪一个选项便需要我们解决。

单行选项栏

单行选项栏是最简单的一种选项栏，前端只需要拿着数据进行遍历，当用户点击其中的任意一项时，我们就很容易的拿到用户点击的元素。

//倘若后端返回的是这种一行的选择栏
selectList: ["数学", "英语", "政治", "体育"],

//我们就只需要将其进行v-for将数据进行遍历后，然后就可能根据用户
//点击的不用获取对应用户点击的元素的信息或者对应的Idw
    <div class="first">
      <span
        v-for="(item, index) in selectList"
        :key="index"
        @click="logItem(item)"
        >{{ item }}</span
      >
    </div>
   //这里直接输出item就得到了对应的项

多行选择列表

但是实际开发过程中后端返回的这种选择列表的结构肯定不是这种单行的信息大多数情况都是如下这种

//其实针对如下数据我们也可以根据遍历来进行展示，那么我们该怎么判断用户点击的是哪一个元素呢
selectType: [
        {
          id: 1,
          name: "学科",
          children: [
            { typeId: 21, name: "数学" ,id:132},
            { typeId: 22, name: "英语" ,id:123},
            { typeId: 23, name: "政治" ,id:120},
          ],
        },
        {
          id: 2,
          name: "年份",
          children: [
            { yearId: 31, name: "2021" ,id:1236},
            { yearId: 32, name: "2020" ,id:1209},
            { yearId: 33, name: "2019" ,id:12097},
          ],
        },
        {
          id: 3,
          name: "来源",
          children: [
            { scoreId: 41, name: "练习题" ,id:1202},
            { scoreId: 42, name: "月考题" ,id:1289123},
            { scoreId: 43, name: "期末踢" ,id:123123},
          ],
        },
      ],

方法一使用v-bind来将这其中的id动态绑定到标签上

//我们可以将每一行的种类对应的自己的Id
<div class="second" v-for="fatherItem in selectType" :key="fatherItem.id">
      <span>{{fatherItem.name}}</span>
      <span
        v-for="(childrenItem) in fatherItem.children"
        :key="childrenItem.id"
        :data-typeId="childrenItem.typeId"
        :data-yearId="childrenItem.yearId"
        :data-scoreId="childrenItem.scoreId"
        @click="logItem($event)"
        >{{childrenItem.name}}</span
      >
    </div>

data() {
    return {
      selectType: [
        {
          id: 1,
          name: "学科",
          children: [
            { typeId: 21, name: "数学", id: 132 },
            { typeId: 22, name: "英语", id: 123 },
            { typeId: 23, name: "政治", id: 120 },
          ],
        },
        {
          id: 2,
          name: "年份",
          children: [
            { yearId: 31, name: "2021", id: 1236 },
            { yearId: 32, name: "2020", id: 1209 },
            { yearId: 33, name: "2019", id: 12097 },
          ],
        },
        {
          id: 3,
          name: "来源",
          children: [
            { scoreId: 41, name: "练习题", id: 1202 },
            { scoreId: 42, name: "月考题", id: 1289123 },
            { scoreId: 43, name: "期末踢", id: 123123 },
          ],
        },
      ],
      select:{
        typeid:0,
        yearid:0,
        scoreid:0,
      }
    }
  },

//我们可以通过event.target获取，如下图所示
   logItem(event){
      let element = event.target
      console.log(element);
      let {typeid,yearid,scoreid} = element.dataset
      console.log( typeid,  yearid, scoreid);
      if(typeid !== undefined){
        this.select.typeid = parseInt(typeid)
      }else if(yearid !== undefined){
        this.select.yearid = parseInt(yearid)
      }else{
        this.select.scoreid = parseInt(scoreid)
      }
      console.log(this.select);
    }
且通过判断对应的属性是否为underfind来对应的将值赋给select这个对应，供后期将值传递给后端

从下面我们可以看出每一个标签上都绑定了与之对应的种类的id，且没有这个id时就会成为underfined,没有点击的另外两个属性就默认为是全部对应的id

第二种根据对应的v-for的item来进行判断

    <div class="second" v-for="fatherItem in selectType" :key="fatherItem.id">
      <span>{{fatherItem.name}}</span>
      <span
        v-for="(childrenItem) in fatherItem.children"
        :key="childrenItem.id"
        :data-typeId="childrenItem.typeId"
        :data-yearId="childrenItem.yearId"
        :data-scoreId="childrenItem.scoreId"
        @click="showItem(childrenItem))"
        >{{childrenItem.name}}</span
      >
    </div>

data() {
    return {
      selectType: [
        {
          id: 1,
          name: "学科",
          children: [
            { typeId: 21, name: "数学", id: 132 },
            { typeId: 22, name: "英语", id: 123 },
            { typeId: 23, name: "政治", id: 120 },
          ],
        },
        {
          id: 2,
          name: "年份",
          children: [
            { yearId: 31, name: "2021", id: 1236 },
            { yearId: 32, name: "2020", id: 1209 },
            { yearId: 33, name: "2019", id: 12097 },
          ],
        },
        {
          id: 3,
          name: "来源",
          children: [
            { scoreId: 41, name: "练习题", id: 1202 },
            { scoreId: 42, name: "月考题", id: 1289123 },
            { scoreId: 43, name: "期末踢", id: 123123 },
          ],
        },
      ],
      selectSecond:{
        typeid:0,
        yearid:0,
        scoreid:0,
      }
    }
  },

//其中的item为v-for的循环体
//我们可以通过点击的选项传入的循环体中的的种类Id来判断，思路和第一种相似，但写法更加的简单
    showItem(item){
      if(item.typeId !== undefined){
        this.selectSecond.typeid = parseInt(item.typeId)
      }else if(item.yearId !== undefined){
        this.selectSecond.yearid = parseInt(item.yearId)
      }else{
        this.selectSecond.scoreid = parseInt(item.scoreId)
      }
      console.log(this.selectSecond);
    }
且通过判断对应的属性是否为underfind来对应的将值赋给select这个对应，供后期将值传递给后端

总结

总体来说对于多行选择的选择栏来说没有一行那样简单，我们需要根据是否存在对应的种类的Id来对应的赋值，但是我仍然建议使用第一种方法，因为它虽然没第二种方法简单，但它在标签上绑定了相关的属性，类似于给这个标签绑定了唯一的身份Id一样。且提供给了我们另外的一种思路。值得我们多练习。

全部代码

    <div class="second" v-for="fatherItem in selectType" :key="fatherItem.id">
      <span>{{fatherItem.name}}</span>
      <span
        v-for="(childrenItem) in fatherItem.children"
        :key="childrenItem.id"
        :data-typeId="childrenItem.typeId"
        :data-yearId="childrenItem.yearId"
        :data-scoreId="childrenItem.scoreId"
        @click="(logItem($event),showItem(childrenItem))"
        >{{childrenItem.name}}</span
      >
    </div>
data() {
    return {
      selectType: [
        {
          id: 1,
          name: "学科",
          children: [
            { typeId: 21, name: "数学", id: 132 },
            { typeId: 22, name: "英语", id: 123 },
            { typeId: 23, name: "政治", id: 120 },
          ],
        },
        {
          id: 2,
          name: "年份",
          children: [
            { yearId: 31, name: "2021", id: 1236 },
            { yearId: 32, name: "2020", id: 1209 },
            { yearId: 33, name: "2019", id: 12097 },
          ],
        },
        {
          id: 3,
          name: "来源",
          children: [
            { scoreId: 41, name: "练习题", id: 1202 },
            { scoreId: 42, name: "月考题", id: 1289123 },
            { scoreId: 43, name: "期末踢", id: 123123 },
          ],
        },
      ],
      selectSecond:{
        typeid:0,
        yearid:0,
        scoreid:0,
      }
    }
  },
//methods的代码
//其中的item为v-for的循环体
//我们可以通过点击的选项传入的循环体中的的种类Id来判断，思路和第一种相似，但写法更加的简单
    logItem(event){
      let element = event.target
      console.log(element);
      let {typeid,yearid,scoreid} = element.dataset
      console.log( typeid,  yearid, scoreid);
      if(typeid !== undefined){
        this.select.typeid = parseInt(typeid)
      }else if(yearid !== undefined){
        this.select.yearid = parseInt(yearid)
      }else{
        this.select.scoreid = parseInt(scoreid)
      }
      console.log(this.select);
    },
    showItem(item){
      if(item.typeId !== undefined){
        this.selectSecond.typeid = parseInt(item.typeId)
      }else if(item.yearId !== undefined){
        this.selectSecond.yearid = parseInt(item.yearId)
      }else{
        this.selectSecond.scoreid = parseInt(item.scoreId)
      }
      console.log(this.selectSecond);
    }
且通过判断对应的属性是否为underfind来对应的将值赋给select这个对应，供后期将值传递给后端