一个基于elementUI的快速列表创建组件,使用最少的dom代码自动呈现所需的外观,配置类似于Jquery easyUI
npm install saryz-table-vue --save
组件依赖 elementUI
dependence elementUI
// 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 | 传给自定义组件的参数 |