el-table的封装。

 别人的:

封装:

        
            
             
            
            
            
    

使用:

 

这是我随便找的一个别人封装的。我自己看着感觉就不太喜欢。因为啥呢?因为使用的时候麻烦得一批。代码较多,正常使用都得带上插槽那部分。。。

自己的:

封装:




使用:


      
      
        
        
      

别人封的我没用过,实际效果不予置评,我自己的有个别没用的地方请自行忽略修改,少了地方自从添加,应该不难的,我相信你。封装的页面还有可以优化的地方,懒得弄了。有兴趣的可以改改。哦对了,再把数据搞出来吧,免得有些小兄弟云里雾里。

tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄弄",
          zip: 200333
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ],
const column = [
  { prop: "date", label: "日期",action:true },
  { prop: "name", label: "名字",action:true },
  { prop: "address", label: "地址" },
  { prop: "TableAction", label: "操作" }
];

哦,对了,突然发现分页也是封装好的,代码如下:






一样的道理,缺陷肯定是有的,改改用用吧

你可能感兴趣的:(前端,vue.js,javascript,elementui)