1. 循环一个标签
普通：
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="hive库" name="0"> <DbList v-if="activeName == '0'" /> </el-tab-pane>
<el-tab-pane label="hive表" name="1"> <TblList v-if="activeName == '1'" /> </el-tab-pane>
</el-tabs>
使用v-for
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="item in datas" :key="item.name" :label="item.label" :name=item.name> <DbList v-if="activeName == item.name" /> </el-tab-pane>
</el-tabs>
...
export default {
name: 'DbTbl',
data () {
return {
datas: [
{
'label': 'Hive库',
'name': '0'
},
{
'label': 'Hive表',
'name': '1'
}
]
}
},
其中，datas是返回的数据，label和name加: ,双向绑定值
2. this.
router
注意：$不能少，没有$将视为定义的普通变量
router 是全局的，如history等查询
route是局部的
console.log(this.$route)
console.log(this.$router)
image.png
大神用的tab页跳转方法：
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="item in datas" :key="item.name" :name="item.name">
<el-tooltip slot="label" :content='item.tips' placement='top-end' v-if="item.tips">
<span>{{ item.label }}</span>
</el-tooltip>
<span slot="label" class='tabname' v-else>
{{ item.label }}
</span>
</el-tab-pane>
</el-tabs>
</template>
<script>
/*
* router ->上级路由
* datas -> 数据渲染 例如：[{ label:this.$t('Member_management'), name: 'member' }]
* query -> 子携带参数 例如：{ type: 1}
* */
export default {
name: 'DdTabmenu',
props: ['router', 'datas', 'query'], // eslint-disable-line
data () {
return {
activeName: ''
}
},
mounted () {
if (this.datas.length > 0) {
this.activeName = this.datas[0].name
}
this.getActive()
},
watch: {
'$route.path' (val) {
this.getActive()
}
},
methods: {
handleClick (tab) {
const url = this.router + tab.name
this.$router.push({ path: url, query: this.query })
},
getActive () {
const path = this.$route.path
for (var p in this.datas) {
const regexp = this.router + this.datas[p].name
const reg = new RegExp(regexp)
if (reg.test(path)) {
this.activeName = this.datas[p].name
break
}
}
}
}
}
</script>
<style scoped>
.box {
padding: 10px;
}
.tabname {
font-size: 14px;
}
</style>
而我根据$route拼接出来的方法：
<template>
<div class="db-wrapper">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="item in datas" :key="item.url" :label="item.label" :name="item.name"> <DbList v-if="activeName == item.name" /> </el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: 'DbTbl',
data () {
return {
thisUrl: '',
datas: [
{
'label': 'Hive库',
'name': '0',
'url': 'hive-db'
},
{
'label': 'Hive表',
'name': '1',
'url': 'hive-tbl'
}
]
}
},
mounted () {
if (this.datas.length > 0) {
this.activeName = this.datas[0].name
}
this.getActive()
},
watch: {
'$route.path' (val) {
this.getActive()
}
},
methods: {
handleClick (tab) {
const url = this.$route.matched[1].path + '/' + this.datas[tab.name].url
this.$router.push({
path: url,
query: this.query
})
},
getActive () {
const path = this.$route.path
for (var p in this.datas) {
const regexp = this.router + this.datas[p].name
const reg = new RegExp(regexp)
if (reg.test(path)) {
this.activeName = this.datas[p].name
break
}
}
}
}
}
</script>
我的在单页面可以用
3. 表格如何加字dom
原表格：
<el-table-column property="description" label="描述" width="400"></el-table-column>
加子dom：
<el-table-column property="name" label="库" width="600">
<template slot-scope="scope">
<span class="name">{{ scope.row.name }}</span>
</template>
</el-table-column>
原来的name值，现在为scope.row.name
4. 子路由在兄弟间跳转，父tab激活问题
我们将父vue用以下代码表示。
我们全部围绕 this.$route来进行匹配路由。
<template>
<div class="db-wrapper">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="item in datas" :key="item.name" :label="item.label" :name="item.name"> </el-tab-pane>
</el-tabs>
<router-view/>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: 'Hive',
data () {
return {
thisUrl: '',
activeName: '',
datas: [
{
'label': 'Hive库',
'name': '0',
'url': 'hive-db'
},
{
'label': 'Hive表',
'name': '1',
'url': 'hive-tbl'
}
]
}
},
mounted () {
if (this.datas.length > 0) {
this.activeName = this.datas[0].name
}
this.getActive()
},
watch: {
'$route.path' (val) {
this.getActive()
}
},
methods: {
handleClick (tab) {
const url = this.$route.matched[1].path + '/' + this.datas[tab.name].url
this.$router.push({
path: url,
query: this.query
})
},
getActive () {
const path = this.$route.path
// path即为点击后的目标url
for (var p in this.datas) {
const regexp = this.$route.matched[1].path + '/' + this.datas[p].url
const reg = new RegExp(regexp)
if (reg.test(path)) {
this.activeName = this.datas[p].name
break
}
}
}
}
}
</script>
5. @click问题
@click可以加参数，或者不加
<span class="name" @click="queryDetails(scope.row.name)">{{ scope.row.name }}</span>
<span class="name" @click="queryDetails">{{ scope.row.name }}</span>
都是可以的。
