首页标签查询优化
This commit is contained in:
@@ -11,8 +11,8 @@
|
|||||||
<div class="bottom clearfix">
|
<div class="bottom clearfix">
|
||||||
<el-scrollbar style="height:50vh">
|
<el-scrollbar style="height:50vh">
|
||||||
<el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange" lazy>
|
<el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange" lazy>
|
||||||
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="tag.index" :name="tag.name" >
|
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="tag.categoryId" :name="tag.categoryName" >
|
||||||
<span slot="label" style="border-radius: 10px;align-items: center;display: flex;flex-direction: row;justify-content: flex-start" v-html="tag.icon"></span>
|
<span slot="label" style="border-radius: 10px;align-items: center;display: flex;flex-direction: row;justify-content: flex-start" v-html="tag.category"></span>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
@@ -263,6 +263,7 @@ export default {
|
|||||||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||||
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||||
},
|
},
|
||||||
|
tags:null,
|
||||||
// tags:['<i class="el-icon-discover"></i> 综 合',
|
// tags:['<i class="el-icon-discover"></i> 综 合',
|
||||||
// '<i class="el-ico-alicyuyan"></i> C++',
|
// '<i class="el-ico-alicyuyan"></i> C++',
|
||||||
// '<i class="el-ico-aliPython"></i> python',
|
// '<i class="el-ico-aliPython"></i> python',
|
||||||
@@ -271,104 +272,105 @@ export default {
|
|||||||
// `<i class="el-ico-alioutline-java-script"></i> javaScript`,
|
// `<i class="el-ico-alioutline-java-script"></i> javaScript`,
|
||||||
// `<i class="el-ico-alicaishichang-"></i> 教 程`,
|
// `<i class="el-ico-alicaishichang-"></i> 教 程`,
|
||||||
// ],
|
// ],
|
||||||
tags:[
|
// tags:[
|
||||||
{
|
// {
|
||||||
index:0,
|
// index:0,
|
||||||
icon: `<i class="el-icon-discover" style="margin-right: 10px"></i> 综合`,
|
// icon: `<i class="el-icon-discover" style="margin-right: 10px"></i> 综合`,
|
||||||
name:"综合"
|
// name:"综合"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:1,
|
// index:1,
|
||||||
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C`,
|
// icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C`,
|
||||||
name:"C"
|
// name:"C"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:2,
|
// index:2,
|
||||||
icon: `<i class="el-ico-aliCyuyan" style="margin-right: 10px"></i> C#`,
|
// icon: `<i class="el-ico-aliCyuyan" style="margin-right: 10px"></i> C#`,
|
||||||
name:"C#"
|
// name:"C#"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:3,
|
// index:3,
|
||||||
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C++`,
|
// icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C++`,
|
||||||
name:"C++"
|
// name:"C++"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:4,
|
// index:4,
|
||||||
icon: `<i class="el-ico-alicss3" style="margin-right: 10px"></i> CSS`,
|
// icon: `<i class="el-ico-alicss3" style="margin-right: 10px"></i> CSS`,
|
||||||
name:"CSS"
|
// name:"CSS"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:5,
|
// index:5,
|
||||||
icon: `<i class="el-ico-aliGoyuyan" style="margin-right: 10px"></i> Go`,
|
// icon: `<i class="el-ico-aliGoyuyan" style="margin-right: 10px"></i> Go`,
|
||||||
name:"Go"
|
// name:"Go"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:6,
|
// index:6,
|
||||||
icon: `<i class="el-ico-alijava" style="margin-right: 10px"></i> Java`,
|
// icon: `<i class="el-ico-alijava" style="margin-right: 10px"></i> Java`,
|
||||||
name:"Java"
|
// name:"Java"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:7,
|
// index:7,
|
||||||
icon: `<i class="el-ico-alioutline-java-script" style="margin-right: 10px"></i> JavaScript`,
|
// icon: `<i class="el-ico-alioutline-java-script" style="margin-right: 10px"></i> JavaScript`,
|
||||||
name:"JavaScript"
|
// name:"JavaScript"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:8,
|
// index:8,
|
||||||
icon: `<i class="el-ico-alikotlin" style="margin-right: 10px"></i> Kotlin`,
|
// icon: `<i class="el-ico-alikotlin" style="margin-right: 10px"></i> Kotlin`,
|
||||||
name:"Kotlin"
|
// name:"Kotlin"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:9,
|
// index:9,
|
||||||
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> ObjectiveC`,
|
// icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> ObjectiveC`,
|
||||||
name:"Objective-C"
|
// name:"Objective-C"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:10,
|
// index:10,
|
||||||
icon: `<i class="el-ico-aliphp" style="margin-right: 10px"></i> PHP`,
|
// icon: `<i class="el-ico-aliphp" style="margin-right: 10px"></i> PHP`,
|
||||||
name:"PHP"
|
// name:"PHP"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:11,
|
// index:11,
|
||||||
icon: `<i class="el-ico-aliPython" style="margin-right: 10px"></i> python`,
|
// icon: `<i class="el-ico-aliPython" style="margin-right: 10px"></i> python`,
|
||||||
name:"python"
|
// name:"python"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:12,
|
// index:12,
|
||||||
icon: `<i class="el-ico-aliRubyyuyan" style="margin-right: 10px"></i> Ruby`,
|
// icon: `<i class="el-ico-aliRubyyuyan" style="margin-right: 10px"></i> Ruby`,
|
||||||
name:"Ruby"
|
// name:"Ruby"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:13,
|
// index:13,
|
||||||
icon: `<i class="el-ico-alirust" style="margin-right: 10px"></i> Rust`,
|
// icon: `<i class="el-ico-alirust" style="margin-right: 10px"></i> Rust`,
|
||||||
name:"Rust"
|
// name:"Rust"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:14,
|
// index:14,
|
||||||
icon: `<i class="el-ico-aliswift" style="margin-right: 10px"></i> Swift`,
|
// icon: `<i class="el-ico-aliswift" style="margin-right: 10px"></i> Swift`,
|
||||||
name:"Swift"
|
// name:"Swift"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:15,
|
// index:15,
|
||||||
icon: `<i class="el-icon-s-help" style="margin-right: 10px"></i> Other`,
|
// icon: `<i class="el-icon-s-help" style="margin-right: 10px"></i> Other`,
|
||||||
name:"Other"
|
// name:"Other"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:16,
|
// index:16,
|
||||||
icon: `<i class="el-ico-alitushu" style="margin-right: 10px"></i> 开源书籍`,
|
// icon: `<i class="el-ico-alitushu" style="margin-right: 10px"></i> 开源书籍`,
|
||||||
name:"开源书籍"
|
// name:"开源书籍"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
index:17,
|
// index:17,
|
||||||
icon: `<i class="el-ico-alijiqixuexi___" style="margin-right: 10px"></i> 机器学习`,
|
// icon: `<i class="el-ico-alijiqixuexi___" style="margin-right: 10px"></i> 机器学习`,
|
||||||
name:"机器学习"
|
// name:"机器学习"
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.account(); //获取cookie的方法
|
this.account(); //获取cookie的方法
|
||||||
this.ProjectLists();
|
this.ProjectLists();
|
||||||
|
this.categoryList();
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// if (sessionStorage.getItem('current_name') == null){
|
// if (sessionStorage.getItem('current_name') == null){
|
||||||
@@ -607,7 +609,7 @@ export default {
|
|||||||
that.projectLists=res.data;
|
that.projectLists=res.data;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
projectListsByCount(index){
|
projectListsByCount(index,name){
|
||||||
var that=this;
|
var that=this;
|
||||||
axios({
|
axios({
|
||||||
method: 'post',
|
method: 'post',
|
||||||
@@ -616,6 +618,7 @@ export default {
|
|||||||
// URL 中的查询参数
|
// URL 中的查询参数
|
||||||
params: {
|
params: {
|
||||||
num: index,
|
num: index,
|
||||||
|
name:name
|
||||||
}
|
}
|
||||||
}).then((res)=>{
|
}).then((res)=>{
|
||||||
// console.log(res.data);
|
// console.log(res.data);
|
||||||
@@ -625,23 +628,21 @@ export default {
|
|||||||
tabChange(tab) {
|
tabChange(tab) {
|
||||||
if(tab.name=="first"){
|
if(tab.name=="first"){
|
||||||
if(this.currentTabIndex!=null){
|
if(this.currentTabIndex!=null){
|
||||||
this. typeChangeFun(this.currentTabIndex);
|
this.typeChangeFun(this.currentTabIndex,this.currentTabName);
|
||||||
}else {
|
}else {
|
||||||
this.ProjectLists();
|
this.ProjectLists();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
if (tab.name == "second") {
|
if (tab.name == "second") {
|
||||||
if(this.currentTabIndex!=null){
|
if(this.currentTabIndex!=null){
|
||||||
this.projectListsByCount(this.currentTabIndex);
|
this.projectListsByCount(this.currentTabIndex,this.currentTabName);
|
||||||
}else {
|
}else {
|
||||||
this.projectListsByCount(this.tabindex);
|
this.projectListsByCount(this.tabindex);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
typeChangeFun(index){
|
typeChangeFun(index,name){
|
||||||
var that=this;
|
var that=this;
|
||||||
axios({
|
axios({
|
||||||
method: 'post',
|
method: 'post',
|
||||||
@@ -650,6 +651,7 @@ export default {
|
|||||||
// URL 中的查询参数
|
// URL 中的查询参数
|
||||||
params: {
|
params: {
|
||||||
num: index,
|
num: index,
|
||||||
|
name:name
|
||||||
}
|
}
|
||||||
}).then((res)=>{
|
}).then((res)=>{
|
||||||
console.log(res.data);
|
console.log(res.data);
|
||||||
@@ -660,12 +662,27 @@ export default {
|
|||||||
typeChange(tab){
|
typeChange(tab){
|
||||||
this.currentTabIndex=tab.index;
|
this.currentTabIndex=tab.index;
|
||||||
if(this.activeName==="first"){
|
if(this.activeName==="first"){
|
||||||
this.typeChangeFun(tab.index);
|
this.typeChangeFun(tab.index,this.currentTabName);
|
||||||
}
|
}
|
||||||
if(this.activeName==="second"){
|
if(this.activeName==="second"){
|
||||||
this.projectListsByCount(tab.index);
|
this.projectListsByCount(tab.index,this.currentTabName);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
// 标签列表
|
||||||
|
categoryList(){
|
||||||
|
var that=this;
|
||||||
|
axios({
|
||||||
|
method: 'post',
|
||||||
|
// 请求的地址
|
||||||
|
url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
|
||||||
|
// URL 中的查询参数
|
||||||
|
params: {
|
||||||
|
}
|
||||||
|
}).then((res)=>{
|
||||||
|
console.log(res);
|
||||||
|
that.tags=res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-card class="box-card">
|
<el-card class="box-card">
|
||||||
|
<el-checkbox-group v-model="checkboxGroup" size="medium">
|
||||||
|
<el-checkbox label="备选项1" border></el-checkbox>
|
||||||
|
<el-checkbox label="备选项2" border></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "ManageCategory"
|
name: "ManageCategory",
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
checkboxGroup:[],
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user