my_table
Table component based on ElementUI supports rendering table through simple configuration, which is more concise and less code than using ElementUI/table directly
Features
ElementUI original function support
- All table attributes are supported, just pass in the mytable component
- All attributes of table-column are supported and passed in on the configuration file column
add feature
- Only one configuration object is needed to render a table,
- Pagination component integration, just pass the configuration
- Support column designation show attribute, show supports Boolen and function two
- The prop of column supports deep attributes (obj.x.a)
- Support configuration type operation bar, automatically calculate the width of the operation bar
- Support simple merging of cells based on configuration
span: {
columnIndex: '1,3',//How many columns to merge
spanColumn:'name'//Merge according to the attribute of the data (columns——>prop)
}
- Support nested header
{
label:'Header',
align:'center',
children: [
{
prop:'name',
label:'子1',
align:'center'
},
{
prop:'deep.name',
label:'子2',
align:'center'
}
]
}
Clone the project and install
# install dependencies
npm install
# build for production with minification
npm run build
Then open index.html in the browser to preview
Installation
Direct browser reference
Refer to index.html, script tag to import build.js, you need to import ElementUI first
webpack usage
installation
npm install @yuany_an/my_table
main.js
import MyTable from'@yuany_an/my_table'
Vue.use(MyTable)
Use
Basic usage
Refer to index.html template
<my-table :table-setting="tableSetting" @refreshTabl="refreshTable"/>
data
tableSetting: {
// The total number of table data, generally update this item after obtaining the data
total: 100,
//Data, generally obtained through the interface
list: [
{
deep: {
name:'meng',
},
level: 0,
date: '2016-05-02',
name:'Yuanyuan',
address:'Licang District Jinshui Road'
},
{
deep: {
name:'yuan',
},
level: 1,
date: '2016-05-02',
name:'dream',
address:'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
},
{
deep: {
name:'yuan',
},
level: 1,
date: '2016-05-02',
name:'dream',
address:'Licang District Jinshui Road'
}
],
// current page number
page: 1,
// number per page
pageSize: 15,
//Switch the number per page
pageSizes: [15, 30, 50, 100],
options: {
// Whether to add table loading loading animation, it can be set to true before loading the data, and set to false after the data is obtained
loading: false,
// Whether to support the list item selection function
selection: false,
// Whether to support table operation function
action: false
},
// column definition to be displayed
columns: [
{
//Whether this column is displayed, the extended attributes on the basis of ElementUI
show: () => {
return true
// return this.nowTable != null && this.nowTable.col1 != null
},
//Field name, support in-depth data acquisition, support formatter, refer to the column definition below, custom support to return html, extended functions based on ElementUI
prop:'deep.name',
//ElementUI's el-table-column component properties are all supported, you can pass in here
fixed:'left',
//Head name
label:'Name',
sortable:true,
//On the way
align:'center',
},
{
prop:'',
label:'Recipient',
align:'center',
formatter: row => {
return row.name
}
},
{
prop:'address',
label:'Recipient',
align:'center'
},
{
prop:'tranOpinion',
label:'Custom column',
align:'center',
formatter: row => {
if (row.level !== 0) {
return row.level
} else {
return `<span style="color: red">Not yet reviewed</span>`
}
}
}
],
//Operation column button definition
operates: {// Column operation button
fixed:'right',
list: [
{
label:'review',
type:'warning',
//Whether this button is displayed
show: row => {
return true
},
icon:'el-icon-edit',
plain: true,
disabled: false,
method: (index, row) => {
}
},
{
label:'View',
type:'info',
show: row => {
if (row.level !== 0) {
return true
} else {
return false
}
},
icon:'el-icon-view',
plain: false,
disabled: false,
method: (index, row) => {
}
}
]
}
}
methods
refreshTable() {
this.tableSetting.options.loading = true
fetch({
url: '/inspect/ins/data',
method: 'get',
params: {
pn: this.tableSetting.page,
ps: this.tableSetting.pageSize
}
}).then(res => {
this.tableSetting.list = res.t.list
this.tableSetting.total = res.t.total
}).finally(() => {
this.tableSetting.options.loading = false
})
}
Configuration items have corresponding instructions
Call ElementUI-Table method by ref
<my-table ref="table" :table-setting="tableSetting"/>
this.$refs['table'].clearSort();
todo
Code optimization, currently only copied from the projectAll attributes of ElementUI are supported through $attrs, and all events are returned through $listenersRemove lodash, only Object.get is used- Remove less dependency
Replace English comments and add English documentsref Get the table component reference