vue实现筛选功能，文字选中变色
2024-10-18 16:29:16
<template>
<Poptip trigger="hover" title="Title" content="content">
<i-button>Hover</i-button>
</Poptip>
<Poptip trigger="hover" title="Title" content="content">
<i-button>Hover</i-button>
</Poptip>
<Poptip trigger="hover" title="Title" content="content">
<i-button>Hover</i-button>
</Poptip>
<Poptip trigger="hover" title="Title" content="content">
<i-button>Hover</i-button>
</Poptip>
<Poptip title="" content="content">
<i-button>筛选</i-button>
<div class="api" slot="content">
<Tabs :animated="false" v-model="currentTab" @on-click="currentTabChanged">
<tab-pane label="学院" name="xy">
<i-row v-for="item in xyList" @click='showZy(item)'>
<i-col span="12" class="xy" :class="{'selectedColor':flag1==item.id}">
{{item.label}}
</i-col>
</i-row>
</tab-pane>
<tab-pane label="专业" name="zy" v-if="show2">
<i-row v-for="item in xyList.zy" @click="showList(item)">
<i-col span="12" class="xy" :class="{'selectedColor':flag2==item.id}">
{{item.label}}
</i-col>
</i-row>
</tab-pane>
</Tabs>
</div>
</Poptip>
</template>
<script>
export default {
data() {
return {
currentTab: 'xy',
show2: false,
flag1: -1,
flag2: -1,
xyList: [{
value: 'renwen',
id: 1,
label: '马克思主义学院',
zy: [{
value: 'xinxi',
id: 1,
label: '马克思'
},
{
value: 'gongcheng',
id: 2,
label: '马克思'
},
{
value: 'tongxin',
id: 3,
label: '马克思'
}
]
},
{
value: 'dili',
id: 2,
label: '地理信息科学技术学院',
zy: [{
value: 'xinxi',
id: 1,
label: '地理'
},
{
value: 'gongcheng',
id: 2,
label: '地理'
},
{
value: 'tongxin',
id: 3,
label: '地理'
}
]
},
{
value: 'sheke',
id: 3,
label: '社科',
zy: [{
value: 'xinxi',
id: 1,
label: '社科'
},
{
value: 'gongcheng',
id: 2,
label: '社科'
},
{
value: 'tongxin',
id: 3,
label: '社科'
}
]
},
{
value: 'renwen',
id: 4,
label: '人文',
zy: [{
value: 'xinxi',
id: 1,
label: '人文'
},
{
value: 'gongcheng',
id: 2,
label: '人文'
},
{
value: 'tongxin',
id: 3,
label: '人文'
}
]
},
{
value: 'dili',
id: 5,
label: '地理',
zy: [{
value: 'xinxi',
id: 1,
label: '地理'
},
{
value: 'gongcheng',
id: 2,
label: '地理'
},
{
value: 'tongxin',
id: 3,
label: '地理'
}
]
},
{
value: 'sheke',
id: 6,
label: '社科',
zy: [{
value: 'xinxi',
id: 1,
label: '社科'
},
{
value: 'gongcheng',
id: 2,
label: '社科'
},
{
value: 'tongxin',
id: 3,
label: '社科'
}
]
}
]
}
},
methods: {
currentTabChanged(name) {
if(this.currentTab == 'xy'){
// this.show2 = false
}
},
showZy(item) {
if (item.label) {
this.flag1 = item.id
this.xyList.zy = item.zy
this.show2 = true
this.currentTab = 'zy'
// console.log(this.xyList.zy)
}
},
showList(item) {
if (item.label) {
this.flag2 = item.id
// console.log(item.label)
}
}
}
}
</script> <style>
span {
padding: 10px;
cursor: pointer;
} .xy {
cursor: pointer;
padding: 5px;
box-sizing: border-box;
} .selectedColor {
color: #2d8cf0;
}
</style>
复制以上代码到 run ivew 网站预览效果
最新文章
- C#如何使用Soap协议调用WebService？
- 为什么接口类型可以直接new?
- HTML <!DOCTYPE> Declaration
- SQL语句的基础
- linux工具之putty
- js函数延迟执行
- DrawDib函数组的使用
- Python天天美味(15) - Python正则表达式操作指南(re使用)(转)
- Educational Codeforces Round 6 D. Professor GukiZ and Two Arrays
- 【Java基础01】Java InputStream的read方法
- HTML+CSS基础学习笔记（2）
- Kendo UI开发教程(26): 单页面应用(四) Layout
- DirectX 9 UI三种设计学习笔记：文章4章Introducing DirectInput+文章5章Wrapping Direct3D
- js获取光标位置
- 在Windows下安装redis扩展和memcached扩展
- 安装 CentOS 时， BIOS 设置界面，找不到虚拟镜像
- projective dynamics的global solve中 引入拉格朗日乘子的简化方法
- Confluence 6 修改日志文件的目标位置
- java程序连接oracle12c报：java.sql.SQLException: ORA-28040: 没有匹配的验证协议。
- Mac系统安装和配置tomcat步骤详解