一步一步走出坑~~~
然后用下面这段代码替换srcconfig outer.config.js
// eslint-disable-next-line
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'
import { bxAnaalyse } from '@/core/icons'
export const asyncRouterMap = [
{
path: '/',
name: 'index',
component: BasicLayout,
meta: { title: '首页' },
redirect: '/dashboard/workplace',
children: [
// dashboard
{
path: 'dashboard',
name: 'dashboard',
redirect: '/dashboard/workplace',
component: RouteView,
meta: { title: '仪表盘', keepAlive: true, icon: bxAnaalyse, permission: [ 'dashboard' ] },
children: [
{
path: 'analysis/:pageNo([1-9]\d*)?',
name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', keepAlive: false, permission: [ 'dashboard' ] }
},
// 外部链接
{
path: 'https://www.baidu.com/',
name: 'Monitor',
meta: { title: '监控页（外部）', target: '_blank' }
},
{
path: 'workplace',
name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
},
{
path: 'test-work',
name: 'TestWork',
component: () => import('@/views/dashboard/TestWork'),
meta: { title: '测试功能', keepAlive: true, permission: [ 'dashboard' ] }
}
]
},
// forms
{
path: '/form',
redirect: '/form/base-form',
component: PageView,
meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
children: [
{
path: '/form/base-form',
name: 'BaseForm',
component: () => import('@/views/form/BasicForm'),
meta: { title: '基础表单', keepAlive: true, permission: [ 'form' ] }
},
{
path: '/form/step-form',
name: 'StepForm',
component: () => import('@/views/form/stepForm/StepForm'),
meta: { title: '分步表单', keepAlive: true, permission: [ 'form' ] }
},
{
path: '/form/advanced-form',
name: 'AdvanceForm',
component: () => import('@/views/form/advancedForm/AdvancedForm'),
meta: { title: '高级表单', keepAlive: true, permission: [ 'form' ] }
}
]
},
// list
{
path: '/list',
name: 'list',
component: PageView,
redirect: '/list/table-list',
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
children: [
{
path: '/list/table-list/:pageNo([1-9]\d*)?',
name: 'TableListWrapper',
hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/basic-list',
name: 'BasicList',
component: () => import('@/views/list/StandardList'),
meta: { title: '标准列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/card',
name: 'CardList',
component: () => import('@/views/list/CardList'),
meta: { title: '卡片列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/search',
name: 'SearchList',
component: () => import('@/views/list/search/SearchLayout'),
redirect: '/list/search/article',
meta: { title: '搜索列表', keepAlive: true, permission: [ 'table' ] },
children: [
{
path: '/list/search/article',
name: 'SearchArticles',
component: () => import('../views/list/search/Article'),
meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
},
{
path: '/list/search/project',
name: 'SearchProjects',
component: () => import('../views/list/search/Projects'),
meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
},
{
path: '/list/search/application',
name: 'SearchApplications',
component: () => import('../views/list/search/Applications'),
meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
}
]
}
]
},
// profile
{
path: '/profile',
name: 'profile',
component: RouteView,
redirect: '/profile/basic',
meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
children: [
{
path: '/profile/basic',
name: 'ProfileBasic',
component: () => import('@/views/profile/basic/Index'),
meta: { title: '基础详情页', permission: [ 'profile' ] }
},
{
path: '/profile/advanced',
name: 'ProfileAdvanced',
component: () => import('@/views/profile/advanced/Advanced'),
meta: { title: '高级详情页', permission: [ 'profile' ] }
}
]
},
// result
{
path: '/result',
name: 'result',
component: PageView,
redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
children: [
{
path: '/result/success',
name: 'ResultSuccess',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
meta: { title: '成功', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
},
{
path: '/result/fail',
name: 'ResultFail',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
meta: { title: '失败', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
}
]
},
// Exception
{
path: '/exception',
name: 'exception',
component: RouteView,
redirect: '/exception/403',
meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
children: [
{
path: '/exception/403',
name: 'Exception403',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
meta: { title: '403', permission: [ 'exception' ] }
},
{
path: '/exception/404',
name: 'Exception404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
meta: { title: '404', permission: [ 'exception' ] }
},
{
path: '/exception/500',
name: 'Exception500',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
meta: { title: '500', permission: [ 'exception' ] }
}
]
},
// account
{
path: '/account',
component: RouteView,
redirect: '/account/center',
name: 'account',
meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
children: [
{
path: '/account/center',
name: 'center',
component: () => import('@/views/account/center/Index'),
meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings',
name: 'settings',
component: () => import('@/views/account/settings/Index'),
meta: { title: '个人设置', hideHeader: true, permission: [ 'user' ] },
redirect: '/account/settings/base',
hideChildrenInMenu: true,
children: [
{
path: '/account/settings/base',
name: 'BaseSettings',
component: () => import('@/views/account/settings/BaseSetting'),
meta: { title: '基本设置', hidden: true, permission: [ 'user' ] }
},
{
path: '/account/settings/security',
name: 'SecuritySettings',
component: () => import('@/views/account/settings/Security'),
meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/custom',
name: 'CustomSettings',
component: () => import('@/views/account/settings/Custom'),
meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/binding',
name: 'BindingSettings',
component: () => import('@/views/account/settings/Binding'),
meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/notification',
name: 'NotificationSettings',
component: () => import('@/views/account/settings/Notification'),
meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
}
]
}
]
},
// other
{
path: '/other',
name: 'otherPage',
component: PageView,
meta: { title: '其他组件', icon: 'slack', permission: [ 'dashboard' ] },
redirect: '/other/icon-selector',
children: [
{
path: '/other/icon-selector',
name: 'TestIconSelect',
component: () => import('@/views/other/IconSelectorView'),
meta: { title: 'IconSelector', icon: 'tool', keepAlive: true, permission: [ 'dashboard' ] }
},
{
path: '/other/list',
component: RouteView,
meta: { title: '业务布局', icon: 'layout', permission: [ 'support' ] },
redirect: '/other/list/tree-list',
children: [
{
path: '/other/list/tree-list',
name: 'TreeList',
component: () => import('@/views/other/TreeList'),
meta: { title: '树目录表格', keepAlive: true }
},
{
path: '/other/list/edit-table',
name: 'EditList',
component: () => import('@/views/other/TableInnerEditList'),
meta: { title: '内联编辑表格', keepAlive: true }
},
{
path: '/other/list/user-list',
name: 'UserList',
component: () => import('@/views/other/UserList'),
meta: { title: '用户列表', keepAlive: true }
},
{
path: '/other/list/role-list',
name: 'RoleList',
component: () => import('@/views/other/RoleList'),
meta: { title: '角色列表', keepAlive: true }
},
{
path: '/other/list/system-role',
name: 'SystemRole',
component: () => import('@/views/role/RoleList'),
meta: { title: '角色列表2', keepAlive: true }
},
{
path: '/other/list/permission-list',
name: 'PermissionList',
component: () => import('@/views/other/PermissionList'),
meta: { title: '权限列表', keepAlive: true }
}
]
}
]
},
// new path
{
path: '/particle',
name: 'particlePage',
component: RouteView,
meta: { title: '组件', icon: 'slack', permission: [ 'dashboard' ] },
redirect: '/particle/list',
children: [
{
path: '/particle/list',
name: 'particlePage',
component: () => import('@/views/particle-monitoring/particleList'),
meta: { title: '组件頁', icon: 'tool', keepAlive: true, permission: [ 'dashboard' ] }
},
{
path: '/particle/test',
name: 'particleTest',
component: () => import('@/views/particle-monitoring/particleTest'),
meta: { title: '測試頁', icon: 'tool', keepAlive: true, permission: [ 'dashboard' ] }
}
]
}
]
},
{
path: '*', redirect: '/404', hidden: true
}
]
/**
* 基础路由
* @type { *[] }
*/
export const constantRouterMap = [
{
path: '/user',
component: UserLayout,
redirect: '/user/login',
hidden: true,
children: [
{
path: 'login',
name: 'login',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
},
{
path: 'register',
name: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
},
{
path: 'register-result',
name: 'registerResult',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
},
{
path: 'recover',
name: 'recover',
component: undefined
}
]
},
{
path: '/test',
component: BlankLayout,
redirect: '/test/home',
children: [
{
path: 'home',
name: 'TestHome',
component: () => import('@/views/Home')
}
]
},
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
}
// 寫到這裡的話，就是整個頁面覆蓋掉原有的頁面了，沒有左側列表哦
// ,
// {
// path: '/particle',
// component: BlankLayout,
// redirect: '/particle/list',
// children: [
// {
// path: 'list',
// name: 'particlePage',
// component: () => import('@/views/particle-monitoring/particleList')
// }
// ]
// }
]
然后新建src views particle-monitoring particleTest.vue
<template> <page-view :title="title"> <div>test</div> <a-table :columns="columns" :dataSource="DataArr" bordered> <template slot="name" slot-scope="text"> <a href="javascript:;">{{ text }}</a> </template> </a-table> </page-view> </template> <script> import { PageView } from '@/layouts' export default { // name: 'particleTest', components: { PageView }, data() { return { renderContent: function() {}, countArr: [], DataArr: [ { Name: '小明', age: '343', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '1' }, { Name: '小明', age: '3434', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '2' }, { Name: '小明', age: '34343', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '3' }, { Name: '小明', age: '43434', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '4' }, { Name: '小明', age: '4343', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '5' }, { Name: '小明', age: '4343', agetwo: 'aa', age3: 'bb', age4: 'cc1', oid: '6' }, { Name: '小明222小明', age: '43434', agetwo: 'aa', age3: 'bb1', age4: 'cc1', oid: '7' }, { Name: '小明333小明', age: '4343', agetwo: 'aa', age3: 'bb1', age4: 'cc1', oid: '8' } ], columns: [ { title: '结构名称', dataIndex: 'Name', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } // console.log(this.countArr['Name']) // console.log(this.countArr['Name'][index]) // obj.attrs.rowSpan = this.countArr['Name'][index] return obj } // customRender (_, row, Tindex) { // // const obj = { // // children :value, // // attrs: {} // // } // let rowSpan = 1 // let arrIndex = 0 // DataArr.forEach((item, Dindex) => { // if (item.oid === row.oid) { // arrIndex = Dindex // 先获取Name所在的arr的Dindex // } // }) // if (Tindex === 0) { // // 当值在多个页面出现时重新记录rowSpan // DataArr.forEach((item, Dindex) => { // if (Dindex > arrIndex) { // if (item.Name === row.Name) { // rowSpan += 1 // } // } // }) // } else if (DataArr[arrIndex].Name === DataArr[arrIndex - 1].Name) { // rowSpan = 0 // } else { // DataArr.forEach((item, Dindex) => { // if (Dindex > arrIndex) { // if (item.Name === row.Name) { // rowSpan += 1 // } // } // }) // } // return { // children: row.Name, // attrs: { // rowSpan // } // } // } }, { title: '屬性222', dataIndex: 'age' }, { title: '屬性2', dataIndex: 'agetwo' }, { title: '屬性3', dataIndex: 'age3' }, { title: '屬性4', dataIndex: 'age4' } ] } }, methods: { conutfun(title) { const DataArr1 = JSON.parse(JSON.stringify(this.DataArr)) var myArray = new Array(DataArr1.length) // 聲明一個數組，每個對應保存的是rowspan的值 console.log(DataArr1) var mykeyname = '' // 保存上一個值 var count = 0 // 保存相同的值出現的次數 var startindex = 0 // 保存第一次這個值出現的位置 for (var i = 0; i < DataArr1.length; i++) { var val = DataArr1[i][title] // console.log(val) // console.log(i) // console.log(title) if (i === 0) { mykeyname = val count = 1 myArray[0] = 1 // console.log('1', i, myArray) } else { if (val === mykeyname) { count++ myArray[startindex] = count myArray[i] = 0 // console.log('2', i, myArray) } else { count = 1 mykeyname = val startindex = i myArray[i] = 1 // console.log('3', i, myArray) } } } return myArray }, countArrFun() { var mynewarray = [] for (var i = 0; i < this.columns.length; i++) { const _ = this.columns[i] const arr = this.conutfun(_.dataIndex) const myobj = {} myobj[_.dataIndex] = arr console.log(myobj) mynewarray.push(myobj) } // this.countArr = JSON.parse(JSON.stringify(mynewarray)) // console.log(this.countArr) return mynewarray } }, mounted() { this.countArr = this.countArrFun() console.log(this.countArr) this.renderContent = (value, row, index) => { const obj = { children: value, attrs: {} } // 在這裡得不到我想要的值 console.log(this.countArr['Name']) console.log(this.countArr['Name'][index]) // obj.attrs.rowSpan = this.countArr['Name'][index] return obj } // 不准我這樣子寫奇葩 // this.columns.forEach( (_) => _.customRender = this.renderContent) // for (var i = 0; i < this.columns.length; i++) { // this.columns[i].customRender = this.renderContent // } // console.log(this.columns) }, computed: { title() { return this.$route.meta.title } } } </script>
补充一个可以用的界面代码
srcviewsparticle-monitoringparticleList.vue
<template> <page-view :title="title"> <div> <h1>hahahaha</h1> <a-table :columns="columns" :dataSource="data" bordered> <template slot="name" slot-scope="text"> <a href="javascript:;">{{ text }}</a> </template> </a-table> </div> </page-view> </template> <script> import { PageView } from '@/layouts' // In the fifth row, other columns are merged into first column // by setting it's colSpan to be 0 const renderContent = (value, row, index) => { const obj = { children: value, attrs: {} } if (index === 4) { obj.attrs.colSpan = 0 } return obj } const data = [ { key: '1', name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', tel: '0571-22098333', phone: 18889898888, age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, tel: '0575-22098909', phone: 18900010002, address: 'Sidney No. 1 Lake Park' }, { key: '4', name: 'Jim Red', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'London No. 2 Lake Park' }, { key: '5', name: 'Jake White', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'Dublin No. 2 Lake Park' } ] export default { // name: 'particleList', components: { PageView }, data () { const columns = [ { title: 'Name', dataIndex: 'name', customRender: (text, row, index) => { if (index < 4) { return <a href="javascript:;">{text}</a> } return { children: <a href="javascript:;">{text}</a>, attrs: { colSpan: 5 } } } }, { title: 'Age', dataIndex: 'age', customRender: renderContent }, { title: 'Home phone', colSpan: 2, dataIndex: 'tel', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (index === 2) { obj.attrs.rowSpan = 2 } // These two are merged into above cell if (index === 3) { obj.attrs.rowSpan = 0 } if (index === 4) { obj.attrs.colSpan = 0 } return obj } }, { title: 'Phone', colSpan: 0, dataIndex: 'phone', customRender: renderContent }, { title: 'Address', dataIndex: 'address', customRender: renderContent } ] return { data, columns } } } </script>
实测完工版本
<template> <page-view :title="title"> <div>test</div> <a-table :columns="columns" :dataSource="DataArr" bordered> <template slot="name" slot-scope="text"> <a href="javascript:;">{{ text }}</a> </template> </a-table> </page-view> </template> <script> import { PageView } from '@/layouts' export default { // name: 'particleTest', components: { PageView }, data() { return { renderContent: function() {}, countArr: [], DataArr: [ { Name: '小明', age: '343', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '1' }, { Name: '小明', age: '3434', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '2' }, { Name: '小明', age: '34343', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '3' }, { Name: '小明', age: '43434', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '4' }, { Name: '小明', age: '4343', agetwo: 'aa', age3: 'bb', age4: 'cc', oid: '5' }, { Name: '小明', age: '4343', agetwo: 'aa', age3: 'bb', age4: 'cc1', oid: '6' }, { Name: '小明222小明', age: '4343', agetwo: 'aa', age3: 'bb1', age4: 'cc1', oid: '7' }, { Name: '小明333小明', age: '4343', agetwo: 'aa', age3: 'bb1', age4: 'cc1', oid: '8' } ], columns: [ { title: 'id', dataIndex: 'oid', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr['oid']) { obj.attrs.rowSpan = this.countArr['oid'][index] } return obj } }, { title: '结构名称', dataIndex: 'Name', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr['Name']) { obj.attrs.rowSpan = this.countArr['Name'][index] } return obj } }, { title: '屬性222', dataIndex: 'age', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr['age']) { obj.attrs.rowSpan = this.countArr['age'][index] } return obj } }, { title: '屬性2', dataIndex: 'agetwo', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr['agetwo']) { obj.attrs.rowSpan = this.countArr['agetwo'][index] } return obj } }, { title: '屬性3', dataIndex: 'age3', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr['age3']) { obj.attrs.rowSpan = this.countArr['age3'][index] } return obj } }, { title: '屬性4', dataIndex: 'age4', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr['age4']) { obj.attrs.rowSpan = this.countArr['age4'][index] } return obj } } ] } }, methods: { conutfun(title) { const DataArr1 =this.DataArr var myArray = new Array(DataArr1.length) // 聲明一個數組，每個對應保存的是rowspan的值 console.log(DataArr1) var mykeyname = '' // 保存上一個值 var count = 0 // 保存相同的值出現的次數 var startindex = 0 // 保存第一次這個值出現的位置 for (var i = 0; i < DataArr1.length; i++) { var val = DataArr1[i][title] if (i === 0) { mykeyname = val count = 1 myArray[0] = 1 } else { if (val === mykeyname) { count++ myArray[startindex] = count myArray[i] = 0 } else { count = 1 mykeyname = val startindex = i myArray[i] = 1 } } } return myArray }, countArrFun() { var mynewarray = {} for (var i = 0; i < this.columns.length; i++) { const _ = this.columns[i] const arr = this.conutfun(_.dataIndex) mynewarray[_.dataIndex] = arr } console.log(mynewarray) return mynewarray } }, mounted() { this.countArr =this.countArrFun() }, computed: { title() { return this.$route.meta.title } } } </script>