vue 表格组件分享

分享一款自己写的table组件  用起来还算简单好用   （先介绍使用方法（ts版本的））

引入组件不多说

import jTable from '../comp/comp/table/table.vue';//table

@Component({
  components: {
    jTable,
  },
})

页面使用

重点！！！！

表格的配置

tableOpt:object = {
      /**
       * @desc 表格数据来源请求（ajax地址）
       */
      getUrl:function(){
        return "/api/gettable"
      },
      /**
       * @description 页码配置
       * @example  
       *    index : number 开始页码
       *    pageSize : number 每页多少条
       *    indexKey : string 后台接口接受开始页码的key名
       *    pageSizeKey : string 后台接口接受每页多少条的key名
       */
      pageOption:{
        index:5 ,
        pageSize:1,
        indexKey:"index",
        pageSizeKey:"pageSize"
      },
      /**
       * @description 数据处理函数 用于处理后台返回的数据 需要返回一个json
       * data : array 包含一个json的数组，数据源
       * index  : number 当前页码
       * total : number 总条数码
       * totalPage : number 总页码数
       */
      dataHandle(data:any){
        return {
          data:data.rows,
          index:data.index,
          total:data.total,
          totalPage:data.totalPage,
        }
      },
      /**
       * @description 表格中每一列的名字和需要取key值
       */
      titleMap:[
        {
          name:"名字",
          key:"name",
        },
        {
          name:"年龄",
          key:"age"
        },
        {
          name:"手机号",
          key:"phone"
        },
        {
          name:"年份",
          key:"year",
        },
        {
          name:"月份",
          key:"month",
        },
        {
          name:"月份",
          key:"month",
        },
        {
          name:"日",
          key:"day",
        },
        {
          name:"t",
          key:"t",
        },
        {
          name:"z",
          key:"z",
        }
      ],
      /**
       * @description 表格按钮
       * val : string 按钮文字
       * callback : function 按钮回掉函数（包含整行数据）
       * type : 按钮的类型  详情看button组件
       * threed 按钮是否是3d的
       * text 按钮是否是文字形的
       */
      actions:[
        {
          val:"操作1",
          callback:this.ccc,
          type:"primary",
          threed : false,
          text:false,
        },
        {
          val:"操作2",
          callback:this.ddd,
          type:"primary",
          threed : true,
          text:false,
        },
        {
          val:"操作3",
          callback:this.ddd,
          type:"warning",
          threed : true,
          text:true,
        }
      ]

  }

就是这么简单  不过需要引入我的button组件   稍后补充下button组件的使用 感觉秒杀element使用 

接下来上table代码

需要公用 js 文件  　　

页面全局需要 

import event from "./comp/tool/event";
　Vue.use(event);

这是注册全局this.$event指令用于跨组件通信

    /**
     * @description eventbus事件 
     * @author jinzz
     * created by 2018/05/25
     * ！！！取消事件订阅必须跟事件订阅成对出现，否则会重复订阅，对javascript性能造成不必要的浪费。因此B组件销毁前需取消当前事件订阅。 
     * @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型，更多参数也可以留作扩展，使用...运算符方便更多操作
     * @method $on 事件订阅, 监听当前实例上的自定义事件。https://cn.vuejs.org/v2/api/#vm-on
     * @method $off 取消事件订阅，移除自定义事件监听器。 https://cn.vuejs.org/v2/api/#vm-off https://github.com/vuejs/vue/issues/3399
     * @method $emit 事件广播, 触发当前实例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
     * @method $once 事件订阅, 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。 https://cn.vuejs.org/v2/api/#vm-once
     */
    export default {
        install:function(Vue:any){
            const eventHub = new Vue()
            Vue.prototype.$_event = {
    
                $on (...event:any[]) {
                eventHub.$on(...event)
                },
                $off (...event:any[]) {
                eventHub.$off(...event)   
                },
                $once (...event:any[]) {
                eventHub.$emit(...event)
                },
                $emit (...event:any[]) {
                eventHub.$emit(...event)
                }
            }
        }
    }

需要fetch.ts(用于ajax请求（我只写了get请求的，因为自己写着玩的，自己写的接口  所以只写了get）)

import Q from "q";
interface jsonType {
    [key: string]: string
}
let defer = Q.defer();
let _active = {
    jsonToString(d:jsonType){
        var result = ""
        for (let name in