vue中使用el-tags实现选项卡样式的标签页

原创

于 2024-07-17 17:21:17 发布 · 956 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

1、效果图

2、跳转链接及鼠标滑过显示红色

<el-table-column  show-overflow-tooltip prop="publishStatus" label="发布状态" width="100">
          <template slot-scope="{row}">
            {
  
  {row.publishStatus=='1'?'未发布':'已发布'}}
          </template>
</el-table-column>

methods:{
//反馈人员详情列表
    gridRespond( row ){
      this.$router.push(
        {
          path:'/gridCall/respond',query:{id:row.id}
        }
      );
    },
}

<style>
#newGridList.el-table .ahover:hover td:nth-child(9) a {
		color: #cc0000;
		border-bottom: 1px solid #cc0000;
		cursor: pointer
	}
</style>
<!-- 这里的td:nth-child(9)是代表给第9列的数据添加鼠标滑过样式-->

3、routes.js

let gridCall_index = r => require.ensure([], () => r(require('./components/gridCallList.vue')),'group16');
let gridCall_respond = r => require.ensure([], () => r(require('./components/gridFeedBackChild.vue')),'group16');


let routes = [
  {
    path: '/gridCall/index',
    component: gridCall_index,
    name: 'gridCall_index'
  },
  {
    path: '/gridCall/respond',
    component: gridCall_respond,
    name: 'gridCall_respond'
  },
 ];
export default routes;

4、gridFeedBackChild.vue 标签页

<template>
    <div class="standard tabCon">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="已反馈**" name="actualRespond">
              <gridActualRespond-list ref="gridActualRespondList"></gridActualRespond-list>
            </el-tab-pane>
            <el-tab-pane label="应反馈**" name="shouldRespond">
              <gridShouldRespond-list