element-table-grid
DIY表格
Installation
npm install element-table-grid --save
# 文档预览
npm run docs-preview
演示请参考 examples/es5/demo.html
文档:http://table-grid.ztbcms.com/docs/#/
说明
使用
<div class="grid-main">
<diy-search-form v-bind="formConfig"></diy-search-form>
<diy-table
:tableData='tableData'
:pagination.sync='pagination'
v-bind="tableConfig"
>
</diy-table>
</div>
数据说明
formConfig: {
searchData [Object]
searchForm [Array]
searchHandle [Array]
formAttr [Object]
}
tableConfig: {
tableAttr [Object]
select: () => {}
....
tableHeader [Array]
isPagination [Boolean]
isSelection [Boolean]
loading [Boolean]
requestConfig [Object]
}
searchData [Object]
tableData [Array]
pagination [Object]
表单数据searchData
searchData: {
name: null,
age: null,
sex: null
}
表单设置searchForm
searchForm: [
{ type: 'Input', label: '', prop: 'name', width: '180px', placeholder: '请输入姓名...', option: {}, formoption: {} },
{ type: 'Select', label: '', prop: 'sex', width: '180px', options: sexs, props: sexProps, change: tag => console.log('tag', tag), placeholder: '请选择性别...' },
]
表单按钮方法设置searchHandle
searchHandle: [
{ name: '查询', option: { type: 'primary' }, click: (searchForm) => console.log('searchForm', searchForm) },
{ name: '重置', option: { type: 'primary' }, click: () => '' }
]
表格数据tableData
tableData: [
{ id: 1, name: '张三', age: '12', text: '', sex: 1, province: '广东', rate: 4.7, checkbox: [], image: 'https://s3.pstatp.com/toutiao/xitu_juejin_web/img/wechat.63e1ce0.svg' },
{ id: 7, name: '李四', age: '27', text: '', sex: 2, province: '广东', rate: 4.7, checkbox: [], image: 'https://s3.pstatp.com/toutiao/xitu_juejin_web/img/wechat.63e1ce0.svg', children: [{ id: 8, name: '李四', age: '27', text: '', sex: 2, province: '广东', rate: 4.7, checkbox: [], image: 'https://s3.pstatp.com/toutiao/xitu_juejin_web/img/wechat.63e1ce0.svg'}] }
],
tableHeader: [
{ label: '姓名', prop: 'name', attr: { align: 'center', class: 'stylestyle' } },
{ label: '年龄', prop: 'age', attr: { sortable: 'custom' } },
{ label: '性别', prop: 'sex', attr: { sortable: 'custom' }, formatData: (val) => { return val === 1 ? '男' : '女' } },
{
label: '定位',
prop: 'location',
type: 'Slot'
},
{
label: '滑块',
prop: 'slider',
type: 'Slider',
attr: { align: 'center', 'width': '100px' },
sliderAttr: {
},
change: (txt, row) => console.log('change', txt, row)
},
{
label: '图片',
prop: 'image',
type: 'Image',
attr: { align: 'center', 'width': '50px' }
},
{
label: '输入',
prop: 'text',
type: 'Input',
attr: { align: 'center', 'width': '100px' },
inputAttr: {}
},
{
label: '下拉框',
prop: 'select',
type: 'Select',
attr: { align: 'center', 'width': '150px' },
selectAttr: {},
optionAttr: {
placeholder: '请选择...'
},
options: sexs,
props: sexProps,
change: (txt, row) => console.log('change', txt, row)
},
{
label: '单选',
prop: 'radio',
type: 'Radio',
attr: { align: 'center', 'width': '150px' },
radioAttr: {
disabled: false
},
radios: sexs,
change: (txt, row) => console.log('change', txt, row)
},
{
label: '复选框',
prop: 'checkbox',
type: 'Checkbox',
attr: { align: 'center', 'width': '150px' },
checkboxAttr: {},
checkboxGroupAttr: {},
checkboxs: sexs,
change: (txt, row) => console.log('change', txt, row)
},
{
label: '评价',
prop: 'rate',
type: 'Rate',
attr: { align: 'center', 'width': '150px' },
rateAttr: {
disabled: true
},
change: (txt, row) => console.log('change', txt, row)
},
{
label: '开关',
prop: 'switch',
type: 'Switch',
attr: { align: 'center', 'width': '100px' },
switchAttr: {
},
change: (txt, row) => console.log('change', txt, row)
},
{
label: '链接',
prop: 'image',
type: 'Link',
attr: { align: 'center', 'width': '100px' },
linkAttr: {}
},
{
label: '长文本',
prop: 'image',
type: 'Popover',
attr: { align: 'center', 'width': '100px' },
popoverAttr: {
trigger: "hover"
}
},
{
label: '操作', type: 'Button',
attr: { fixed: 'right', align: 'center', 'width': '200px', 'z-index': '' },
buttonGroup: [
{ name: '编辑', click: row => console.log('tag', row), buttonAttr: { type: 'primary' } },
{ name: '删除', click: row => console.log('tag', row), buttonAttr: { type: 'danger' } }
]
}
]
pagination: {
pageSize: 10,
pageNum: 1,
total: 17,
sizeChange: () => console.log('handleSizeChange'),
currentChange: () => console.log('handleCurrentChange'),
layout: 'total,sizes ,prev, pager, next,jumper',
style: 'display: flex;justify-content: center;align-items: center;'
}
支持slot自定义
<diy-table>
<div slot="location">
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
</div>
</diy-table>
tableHeader: [
{
label: '定位',
prop: 'location',
type: 'Slot',
slot: 'location'
}
]
requestConfig 默认请求配置
requestConfig: {
apiurl: 'https://xxxx.com/GetList',
method: 'post',
data: {
'name': ''
},
headers: {
'content-type': 'text/json; charset=utf-8'
},
datakeys: ['data', 'items'],
totalkeys: ['data', 'total_pages'],
resCodes: [200, 1]
}
注意:该组件的方法全部采用驼峰命名 例:sort-change 修改为 sortChange, 但是属性名与elementui相同