element-ui表格封装(分页、自定义设置等)

最近要开发一个cms系统,开发技术栈选用了vue+element-ui,第一次使用,边踩坑边总结,这里将表格的封装的思路及代码分享出来给大家讨论学习,其中还有很多不完善的地方需要改进,大家可以提出,互相交流学习。

话不多说,贴代码,首先是组件代码table.vue






tableData数据格式:

tableData: [{
        data:[],//用于存放请求回来需要渲染的数据
          cols: [
            {prop: 'id', label: '序号'},
            {prop: 'position_name', label: '类型'},
            {prop: 'loop', label: '状态'},
            {prop: 'started_at', label: '发布时间'},
            {prop: 'updated_at', label: '修改时间'},
            {prop: 'link', label: '跳转链接'}
          ]
        }],

其中分页代码大家参考饿了么文档便能理解,这里简单说下操作栏,由于每个页面表格会有不同样式(有无操作列),这里由父组件传递数据isShow来控制table操作栏的显示隐藏,true为带操作栏的表格,false则相反。其中table组件操作栏采用了作用域插槽(每个table的操作选项可能不同),父组件调用时可自定义配置,具体调用代码如下:

其中:tableData="tableData"用来传递table数据给子组件table.vue,v-on:del_data="showChild"用来接收子组件传来的id值(用于批量删除/禁用等,下文会讲到),操作选项中删除按钮对应的deleteClick(scope)事件,其中scope便可得到当前行你想要的的所有信息,包括id、name等,拿到相应的数据比如id,配合axios你就可以进行相应的操作啦~~

deleteClick(obj){
      console.log(obj.todo.row.id);
      axios.post(this.baseUrl+'/banners/del/'+obj.todo.row.id+'?_token='+this.globe_token,{}).then((res)=>{
        if(res.data.msg=='success'){
          this.$message({
            message: '删除成功!',
            type: 'success'
          });
          var time=setInterval(()=>{
            location.reload();
            clearInterval(time);
          },1000);
        }
        console.log(res);
      }).catch((err)=>{
        console.log(err);
      });
    },

最后再讲下批量xx,由于某些表格不需要批量功能,批量xx在子组件table.vue中定义具名插槽便于自定义,功能的实现首先要在子组件中定义selection-change事件:


 methods:{
    tableSelectionChange(val) {//tips:当用户手动选择table checkbox时触发
      this.del_id = val;
      this.$emit("del_data",this.del_id);//将id数组传给父组件
      console.log(this.del_id);
    }
  }

然后在父组件中接收:


methods:{
    showChild(data){//用来接收子组件传来的数据
      console.log(data);
      this.childMsg=data;//用childMsg保存传来的数据,方便调用
    }
}
//遍历this.childMsg便能得到相应id,之后就可以愉快的批量删除

到这里,一个可复用的表格组件就完成了,相信整个思路会对初次使用element-ui做表格的前端有一定帮助,其中有写的不清楚的或者错误的地方,希望大家批评指正,相互交流学习,共同进步!

转载于:https://my.oschina.net/u/2917756/blog/2236738

你可能感兴趣的:(element-ui表格封装(分页、自定义设置等))