Nirvana Playing Madonna

    vue2-el-table

    1.1.7 • Public • Published

    VUE elementUI table

    安装:

    npm i vue2-el-table
    

    使用:

    注意:本组件依赖如下包,如果没有请安装
    elementUI
       npm i element-ui -S
    axios
       npm install axios
    sortablejs
       npm install sortablejs --save
    
     tableData绑定整个table所用数据,格式请查看下列文档
     @eventAll返回整个组件回调,返回格式查看下列文档
     <tables v-bind="tableData" @eventAll="tableEvent"/>
       //此处可使用插糟,格式查看下列文档
     </tables>
    
    import tables from 'vue2-el-table'
    components: {
       tables
     }
    

    温馨提示:

    如下依赖包已集成部份常用API,如需使用请安装
        npm i vue-el-table-api
        查看API详情 https://www.npmjs.com/package/vue-el-table-api
    

    table数据结构:

    组件控制参数:

    tableData:{
      如果都不需要配置borderParams,直接不写即可,如用只需配置所用到的功能即可,不用的直接不写
      borderParams: {
        operationStatus: true, // 是否显示操作列
        border: false, // 表格是否显示边框
        selection: true, // 多选 如果highlightCurrentRow为true,selection必为false
        stripe: false, // 是否显示斑马线
        highlightCurrentRow: false, // 单选 如果selection为true,highlightCurrentRow必为false
        maxHeight: 'auto', // 设置最大高度
        showSummary: false, // 是否合计
        spanMethod: null, // 行合并还是列合并
        index: false, // 是否显示序号
        emptyText: '暂无数据', // 如数据为空的提示语
        RowDrag: true, // 是否需要行拖拽
        isPage: true // 是否显示分页组件 默认为false
        isDefaultCheckAll: true // 是否默认全选所有数据
        isShowdbTable: true // 是否显示上table勾选,下table显示  必须和selection同时为true
      },
      
      //当borderParams的isPage为true时添加如下配置(必填项以后可以不写),如果为false时,可以直接不写整个page
      page: {
         url: '/api/prsBuckle/showBalanceDetails', // 列表请求接口 必填 
         currentPage: 1, // 当前页 必填
         pageSizes: [10, 20, 30, 40, 50, 100], // 页显示个数选择器 必填
         pageSize: 10, // 页显示个数 必填
         pageInfo: {}, // 分页传参 必填 初始值可为{}
         method: 'post', // 默认为get
         background: true // 是否带有背景色的分页 默认false
         layout:"total, sizes, prev, pager, next, jumper" //默认为全部
      },
      
      /* 表头对象参数
         1、title标题名 必填
         2、value字段名 必填
         3、width单元格宽度 '180'
         4、align对齐方式[left,center,right] 默认center
         5、fixed固定表格[left,center,right]
         6、sortable是否排序[true, false, 'custom'] custom为后台排序
         7、filters列条件查询   [{ text: '名称', value: '值' }] 值会对应表头的value
         8、transitions 数据转换   [{ key: '100', value: '一百' }]
              注:等同于使用管道过滤 如 if(params == '100') reutn '一百' else '无数据'
      */
      
      tableTitle:[
         {
                title: '会员管理',
                align: 'center',
                value: 'memberManage',
                children: [
                      {
                        title: '金额',
                        value: 'money',
                        width: '180',
                        align: 'center',
                        sortable: 'custom',
                        filters: [{ text: '金额100', value: '100' }, { text: '金额200', value: '200' }],
                        transitions: [
                          { key: '100', value: '一百' },
                          { key: '200', value: '二百' },
                          { key: '300', value: '三百' },
                          { key: '400', value: '四百' },
                          { key: '500', value: '五百' }
                        ]
                      }
                    ]
        },
      ],
      
      //表格数据
      tableData: []
    }
    
    
    

    组件回调说明:

    tableEvent (eventSource) {
       switch (eventSource.key) {
            case 'selection': // 主table多选
              console.log(eventSource.data)
              break
            case 'dbTableSelection': // borderParams.isShowdbTable为true时的dbTable多选
              console.log(eventSource.data)
              break
            case 'getingData': // borderParams.isShowdbTable为true时点击下方提交,获取dbTable数据
              console.log(eventSource.data)
              break
            case 'radioButton':// 主table单选
              console.log(eventSource.data)
              break
            case 'sort':// 主table拖拽
              console.log(eventSource.data)
              break
            case 'custom':// 主table后台排序
              console.log(eventSource.data)
              break
            case 'init':// 此处一般用于分页返回数据进行覆盖table数据
              console.log(eventSource.data)
              break
      }
    }
    
    
    注:page里,有一个请求,需要返回的数据结构如下,如果不符合即无法使用,或者使用组件代码方式来使用本组件
    https://github.com/awfifnypm/vue-element-table/
    
    数据状态码:res.data.code == 200 成功为200
    列表数据总数量:res.data.total
    

    插糟使用方式:

    <tables v-bind="tables" @eventAll="tableEvent">
    
    <!-- 注:目前只可能获取一级表头插槽,如果对二级以上表头数据,请参照下面例子 -->
    <!-- 一级表头获取插槽使用方法 -->
    <!-- <template #money> 把money改成对应的表头字段即可获取对应的插糟
        <el-table-column
        label="余额slot"
        prop = "money"
        align = "right"
        width = "180"
        >
        </el-table-column>
    </template> -->
    
    <!-- 二级表头获取插槽使用方法,多级以此类推 -->
    <template #yanshi>
        <!--
        此处设置el-table-column会覆盖table组件里默认el-table-column,
        el-table-column操作比el-table官方组件最外层多了一个template
        -->
        <el-table-column
        label="自定义列一演示"
        align = "center"
        width = "180"
        >
          <!--
          如果下级数量过多,但又需要在页面操作,此处支持v-for遍历
          一、template处改为 <template #yanshi="row">
          二、使用row.children数据源遍历
          三、通过索引找到要操作项,进行逻辑操作 可使用v-if v-else或其它
          -->
          <el-table-column
          label="自定义列一"
          prop = "column1"
          align = "center"
          width = "180"
          >
              <template slot-scope="scope">
              	{{scope.row.column1 + ' Hello'}}
              </template>
          </el-table-column>
        </el-table-column>
    </template>
    
      <!-- 下面为操作列 operationStatus为true使用 -->
      <template v-slot:operation="scope">
          <el-button @click.native="delFuc(scope.row,scope.$index)">删除</el-button>
      </template>
    </tables>
    

    如需自定义开发:

    打开链接 https://github.com/awfifnypm/vue-element-table/
    下载组件源码进行自定义修改使用
    
    如需帮助请联系 vx:czl630964
    

    Install

    npm i vue2-el-table

    DownloadsWeekly Downloads

    1

    Version

    1.1.7

    License

    ISC

    Unpacked Size

    36.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • awfifnypm