element-ui封装 el-table el-pagination

components 文件夹 创建 MyTable
MyTable 下 index .vue
方法一 使用插槽的方式
方法二 使用 render 方式




el-column .vue





el-render.vue


index.js 全局注册组件

import MyTable from "./MyTable";

export default Vue => {
  // 注册组件
  // 使用Vue.component()注册组件时,全局id自动作为组件的名称
  // 也就是说,此时第一参数为组件的名称
  Vue.component("my-table", MyTable);
};

main.js

import components from './components/index.js';

Vue.use(components);

组件使用
其他参数按照 element-ui 组件标注


  
  
  


// 数据示例
tableData: {
  isSelection: true,
  // isAction: true,
  // data: this.list,
  columns: [
    {
      // fixed: true,
      type: "expand",
      // 方法二 render 方式
      render: (h, scope) => {
        return {scope.row.type};
      }
    },
    {
      prop: "id",
      label: "ID",
      minWidth: 260,
      // fixed: true,
      align: "center"
    }
    // {
    //   prop: "type",
    //   label: "类型"
    // },
  ]
}

参考:lb-element-table

你可能感兴趣的:(element-ui封装 el-table el-pagination)