0.1.1 • Published 4 years ago
render-el-table v0.1.1
render-el-table
render element table
Install
$ npm install render-el-table -S
Usable
在 main.js 文件中引入
# main.js
import RenderTable from 'render-el-table'
Vue.use(RenderTable)
在项目中使用 RenderTable
<RenderTable
:columns="columns"
:loading="loading"
:total="total"
:tableData="tableData"
:currentPage="params.currentPage"
:pageSize="params.pageSize"
@change="handleChange"
/>
export default {
data() {
return {
columns,
tableData: [],
total: 0,
loading: false,
params: {
pageSize: 10,
currentPage: 1
}
}
},
created() {
this.onSubmit()
},
methods: {
onSubmit() {
this.loading = true
setTimeout(() => {
this.loading = false
this.total = 100
this.tableData = []
}, 500)
},
handleChange(params) {
console.log('handleChange: ', params)
this.params = params
this.onSubmit()
}
}
}
Set columns
你可以通过在 columns 配置自定义 column, 支持 JSX
const columns = [
{
prop: 'date',
label: '日期',
width: 120,
render(h, ctx) {
const { row: { date } = {} } = ctx.props
return <span style='color: #409eff'>{date}</span>
}
},
{ prop: 'name', label: '姓名' },
{ prop: 'address', label: '地址' }
]
Event
监听 Pagination 的 change 事件触发
<RenderTable
:columns="columns"
:loading="loading"
:total="total"
:tableData="tableData"
:currentPage="params.currentPage"
:pageSize="params.pageSize"
@change="handleChange" />
export default {
methods: {
handleChange(params) {
console.log('handleChange: ', params)
this.params = params
this.onSubmit()
}
}
}
Action
export default {
created() {
this.addCctionColumn()
},
methods: {
addCctionColumn() {
const self = this
this.columns.push({
prop: 'action',
label: '操作',
render(h, ctx) {
const { row } = ctx.props
return (
<el-button size='small' type='primary' onClick={() => self.handleClick(row)}>
主要按钮
</el-button>
)
}
})
},
handleClick(row) {
console.log('handleClick: ', row)
}
}
}
RenderTable Support Props
// render-el-table.vue
export default {
props: {
columns: {
type: Array,
default: () => []
},
tableData: {
type: Array,
default: () => {}
},
loading: {
type: Boolean,
default: false
},
total: {
type: Number,
default: 0
},
currentPage: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default: () => [10, 20, 30, 40, 50]
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
}
}
}