x-components-vue v0.1.4

x-components-vue

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

说明

 依赖 element-ui

vue版本 2.6+

使用

npm install x-components-vue
import XComponents from 'x-components-vue'
Vue.use(XComponents)

// *.vue
<template>
    <div>
        <x-table
            :columns="columns"
            :apis="apis"
            show-search
            show-handle
        ></x-table> 
    </div>
</template>

x-tables 组件

props: {
    showSearch: [true | false], // 是否展示搜索栏  默认true
    showHandle: [true | false], // 是否展示功能栏  默认false  -->批量删除, 导出 等功能按钮
    extra: {},  // 列表查询接口的附加参数
    columns: {
        type: 'index',  // selection || index  根据el 拓展
        label: '', // 各种名
        prop: '', // 取值字段名
        inSearch: [true | false],  // 是否支持搜索  默认不支持
        config: { // 在搜索表现形式
            type: '' //  input/select/year/month/date/week/ datetime/datetimerange/daterange  默认input
            options: [ // type 为 select 需通过次参数配置选项
                label: '', // 
                valeu: ''
            ] 
        },
        link: [true | false], // 列是否以链接的形式展示 点击时会触发event @inner-link-click
        slot: 'operate' // 若设置此参数 则需通过 slot形式渲染该列  <template #prop="{scope: {row}}"></template>
                        // operate 具名插槽, 操作栏预留支持 编辑 删除
    },
    apis: {
        list: () => {}, // 列表查询函数
        add: () => {},  // 新增数据函数   暂不支持
        edit: () => {}, // 数据编辑函数  暂不支持
        del:() => {}    // 删除函数 暂不支持
    }
},
events: {
    /**
     * @params prop 本列取值字段
     * @params data 本列数据 row
    */
    inner-link-click: (prop, data) => {}
}