其实在项目开发的过程中,大多数情况下都是后端返回给前端数据,前端能做的就只是拿着数据进行遍历,且当用户点击时,根据用户点击的数据项,像后端发送相关的请求,重新获取数据。其中的选项栏便是一个重点,如何知道用户点击的是哪一个选项便需要我们解决。
单行选项栏
单行选项栏是最简单的一种选项栏,前端只需要拿着数据进行遍历,当用户点击其中的任意一项时,我们就很容易的拿到用户点击的元素。
//倘若后端返回的是这种一行的选择栏
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这个对应,供后期将值传递给后端