saryz-table-vue

一个基于elementUI的快速列表创建组件，使用最少的dom代码自动呈现所需的外观，配置类似于Jquery easyUI

安装 install

npm install saryz-table-vue --save

组件依赖 elementUI
dependence elementUI

快速使用 Quick to use

// main.js 全局引用 Global references
import SaryzTable from 'saryz-table-vue'
import 'saryz-table-vue/lib/saryz-table-vue.css'

Vue.use(SaryzTable)

// xxxxxx.vue 使用 use
<template>
  <div class="table_demo">
    <SaryzTable :colsOption="colsOption" :tableData="tableData" :height="500"></SaryzTable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { name: '刘德华', phoneNumber: '13989876567' },
        { name: '刘德华', phoneNumber: '13989876567' },
        { name: '刘德华', phoneNumber: '13989876567' }
      ],
      colsOption: [
        {
          id: 'name',
          name: '姓名',
          width: ''
        }, {
          id: 'phoneNumber',
          name: '电话',
          width: '120'
        }
      ]
    }
  }
}
</script>
<style>
  .table_demo {
    padding: 30px;
    border: 1px solid #ccc;
    width: 1000px;
    margin: 30px auto;
    background: #fff;
  }
</style>

Props

| Name | Type | Default | Description | | ---- | ---- | ---- | ---- | | colsOption | Array | [] | 表格列定义,详见下面 | | tableData | Array | [] | 表格源数据 | | height | Number | null | 表格高度，超出高度部分自动出现滚动条 | | pagination | Boolean | true | 分页控件 | | checkbox | Boolean | false | 是否显示多选框 | | border | Boolean | false | 是否显示边框 | | ccslh | Boolean | true | 超出部分省略号，如为true，表格单元格超出设置宽度不换行，自动出现省略号 | | selectedRowsData | Array | [] | 已选择行数据,用于数据回填 | | emptyText | String | '暂无数据' | 空数据时显示默认提示内容 | | rowKey | String | '' | 行数据唯一标识,行数据选择操作时必填 | | miniTable | Boolean | false | 小表格 表格字体会缩小 | | rowStyle | Function | () => {} | 表格自定义样式 | | filterObj | Object | () => {return {key:'',name:''}} | 过滤器配置 | | filterSwitch | Boolean | false | 过滤器开关 | | sortable | Boolean | true | 是否排序 , 全部前端数据排序 | | indexNum | Boolean | true | 行号 | colsOption:列定义

| Name | Type | Required Fields | Description | | ---- | ---- | ---- | ---- | | id | String | required | 表格列定义 | | name | String | required | 列名称 | | width | String/Number | | 列宽 | | align | String(center,left,right) | | 对齐方式 | | formatter | Function(value,rowData) | | 数据过滤，需要return | | hideSortable | Boolean | | 是否对该列取消排序，默认id为handle自动取消排序 | | component | Component | | 自定义组件，通常用于放置通用按钮或者图片等 | | componentCallBack | Function(data) | | 自定义组件回调，接收自定义组件回调方法 | | params | Object | | 传给自定义组件的参数 |

demo

https://saryz-ui.github.io/