byte-sailing-vue/src/components/by-table/index.js

import './by-table.scss'
export default {
    data() {
        return {

        }
    },
    props: {
        //数据源
        data: {
            type: Array,
            default: () => []
        },
        // table配置信息 
        columns: {
            type: Array,
            default: () => []
        },
        // 每页条数
        pageSize: {
            type: Number,
            default: 10
        },
        // 总条数
        total: {
            type: Number,
            default: 0
        },
        // 当前页码
        pageNum: {
            type: Number,
            default: 1
        },
        //搜索配置
        selectConfig: {
            type: Array,
            default: () => []
        },
        //请求参数
        req: {
            type: Object,
            default: () => {
                return {
                    pageNum: 1,
                    pageSize: 10,
                    total:0,
                }
                
            }
        }

    },
    methods: {
        //操作按钮
        renderActionColumn(h, actions) {
            return <el-table-column
                label={actions.label || '操作'}
                width={actions.width || 200}
                align="right"
                {...{
                    scopedSlots: {
                        default: row => {
                            //循环按钮，触发配置方法
                            return actions.actions.map(item => {
                                return <el-button
                                    type="text"
                                    disabled={item.disabled || false}
                                    onClick={
                                        () => item.fn ? item.fn(row) : console.log('请配置fn方法')
                                    }
                                    style={actions.style || 'color:#0084FF'}>
                                    {item.text}
                                </el-button>
                            })
                        }
                    }
                }}
            >
            </el-table-column>
        },
        //拼接table
        renderTable(h) {
            return (
                <elTable data={this.data}>
                    {
                        this.columns.map(item => {
                            if (item.actions) {
                                console.log(item.actions)
                                return this.renderActionColumn(h, item)
                            } else if (item.render) {
                                return <el-table-column
                                    label={item.label || 'label没配置哦！'}
                                    width={item.width || null}
                                    {...{
                                        scopedSlots: {
                                            default: ({ row }) => {
                                                return item.render(h,row)
                                            }
                                        },

                                    }}
                                >
                                </el-table-column>
                            }
                            else {
                                return <el-table-column
                                    prop={item.prop || null}
                                    label={item.label || 'label没配置哦！'}
                                    width={item.width || null}
                                    {...{
                                        scopedSlots: {
                                            default: ({ row }) => {
                                                return <div class={item.textType == 'blue' ||  item.textType == 'blueOrLine' ? 'cl-blue' : ''}>
                                                    <span 
                                                        style={item.textType == 'blueOrLine' ? 'border-bottom:1px solid #0084FF;cursor: pointer;' : ''}
                                                        onClick={
                                                            () => item.fn ? item.fn(row) : console.log('请配置fn方法')
                                                        }>
                                                        {row[item.prop]}
                                                    </span>
                                                </div>
                                            }
                                        },

                                    }}
                                >
                                </el-table-column>
                            }

                        })
                    }
                </elTable>
            )
        },
        //render分页
        renderPage(h) {
            return <pagination v-show={this.total > 0} total={this.total} page={this.pageNum} limit={this.pageSize}  />
        },
        renderDropDown(h,item) {
            const v = this
            return <div class='by-dropdown'>
                <div class='by-dropdown-title'>{item.label} <i class="el-icon-caret-bottom el-icon--right"></i></div>
                <ul class="by-dropdown-lists">
                    <li onClick={() => {
                        v.req[item.prop] = null
                        item.label = item.labelCopy.label
                        //item.label = item.labelCopy
                    }}>全部</li>
                    {
                        item.data.map(i => {
                            return <li key={i.value} 
                            onClick={
                                () => {
                                    v.req[item.prop] = i.value
                                    item.label = i.label
                                }
                            }>{i.label}</li>
                        })
                    }
                </ul>
            </div>
        },
        //render搜索
        renderSearch(h) {
            if(!this.selectConfig) return <div></div>
            
            return <div class='by-search'>
                <div style='display: flex;'>
                    {
                        this.selectConfig.map( item => {
                            return this.renderDropDown(h,item)
                        })
                    }
                    <div class='more-text'>更多 <i class="el-icon-arrow-right el-icon--right"></i></div>
                </div>
                <div  style='display: flex;'>
                    <el-input
                        placeholder="请选择日期"
                        suffix-icon="el-icon-search"
                        size="mini"
                        value={this.req.keyword} onInput={$event => this.req.keyword = $event}>
                    </el-input>
                    <div class='more-icon'><i class="el-icon-arrow-right el-icon--right"></i></div>
                </div>
            </div>
        },
        renderSearchInit(){
            this.selectConfig.map(item => {
                item.labelCopy = JSON.parse(JSON.stringify(item))
                console.log(item.labelCopy)
            })
        },
    },
    created(){
        this.renderSearchInit()
    },
    name: 'by-table',
    render(h) {
        
        const search = this.renderSearch(h)
        const table = this.renderTable(h)
        const page = this.renderPage(h)
        return <div class='by-table'>
            {search}
            {table}
            {page}
        </div>
    },
}