Element 常用组件之 表格组件 table

官方文档

1. router->index.js 设置路径/table，指向table.vue

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes:[
    // 学习vuex， 多定义一个路由
    {
      path:'/',
      component:() => import('../views/Parent.vue'),
      // 重定向
      redirect:'/table'
    },
    {
      path:'/home/:id',
      // 动态路由传参，根据name指定，需要多配置一个name
      name:'home',
      component:() => import('../views/Home.vue'),
      Children:[{
        path:'/child',
        component:() => import('../views/Child.vue')
      }]
    },
    {
      // elementUI 之 layout
      path:'/layout',
      component:() => import('../views/elements/layout.vue')
    },
    {
      // elementUI 之 pop
      path:'/pop',
      component:() => import('../views/elements/pop.vue')
    },
    {
      // elementUI 之 pop
      path:'/table',
      component:() => import('../views/elements/table.vue')
    },
  ]
})

export default router

2. views->elements->table.js

 

data: json数据

prop: 键值对的键

slot插槽实现自定义列

 

 for封装一个基本table组件