@~crazy/tablex v1.0.0-28

tablex

tablex 是一个基于 Vue 、ELement UI 、 Axios 实现的一个 table 组件，可根据配置快速实现增删改查业务

安装

npm i @~crazy/tablex -S

使用

• main.js

// 引入
import tablex from '@~crazy/tablex'
// 安装
Vue.use(tablex, {
    // 全局配置
});
// 全局访问 tablex 对象
Vue.$tablex;

tablex 全局属性

全局配置

Vue.use(tablex, {
    // Vue I18n
    i18n: null,
    // 国际化语言列表
    locales: {},
    // Vue Store
    store: null,
    // 请求配置
    request: {
        // 接口地图
        map: {},
        // axios 配置
        axios: {
            authorizationKey: 'Authorization',
            // 全局配置
            defaults: {
                // 请求超时毫秒数
                timeout: 1000 * 5,
                // 跨域请求是否需要使用凭证
                withCredentials: true,
                // 请求头配置
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                },
            },
            // 自定义拦截处理回调
            interceptors: {
                request: [],
                response: [],
            },
        },
    },
    table: {
        // 全局请求参数格式化回调
        requestFormat: null,
        // 全局响应数据格式化回调
        responseFormat: null,
        // 全局删除请求参数格式化回调
        deleteRequestFormat: null,
        // 删除
        delete: {
            // 参数键
            key: 'id',
            // 获取参数值的键
            paramKey: 'id',
        },
        // 分页
        paging: {
            // 分页参数格式化回调
            paramsFormat: null,
        },
    },
})

request.map 接口地图

格式为 JSON，接口集合可多层嵌套

• 格式

{
    接口名称：'请求方式，GET / POST',
    // 如 POST ： http://XXXX/login
    login: 'post',
    
    自定义接口函数名称： ['请求方式，GET / POST', '接口名称'],
    // 如 POST ：http://XXXX/login
    // 自定义接口函数名为 Login
    Login: ['post', 'login'],
    
    接口集合名(以开头的名称命名)：{},
    // 如有以下以 system 开头的接口:
    // POST：http://XXXX/system/setUser
    // GET：http://XXXX/system/getUserData
    system: {
        setUser: 'post',
        getUserData: 'get',
    },
    
    接口集合名(不以开头的名称命名)：{},
    // 如有以下以 system 开头的接口:
    // POST：http://XXXX/system/setUser
    // GET：http://XXXX/system/getUserData
    SystemData: {
        // 设置默认接口前缀
        default: 'system',
        setUser: 'post',
        getUserData: 'get',
    },
}

• 示例

import tablex from '@~crazy/tablex';
// 配置
Vue.use(tablex, {
    request: {
        map: {
            // 设置用户数据
            setUserData: ['post', 'set_user_data'],
        },
    },
});

// 通过 api 属性访问
// 获取请求实例
const req = this.$tablex.api.setUserData({
    // 传递参数
    nickname: 'admin',
    address: 'xxxxxx',
});
// 发送请求
req.send({
    // 此处可覆盖参数
}).then(res => {
    // 请求成功
});

// 取消请求
req.cancel();

数据类型

为了实现各种数据类型在界面上的展示(Visible)、编辑（Edit），在此定义了几种数据类型（文档中为了不与原生属性混淆，使用 tablex 作为前缀）：

Type

基类，所有类型均继承此类。目前有以下类：

Type 类实例有以下函数：

不同类型函数传参有所不同

• constructor 构造函数 & set

• getEditor

获取类型编辑器，编辑器可修改数据值返回到数据源中。多用于表单提交新增、修改功能

• toVisible

将原始数据转换为显示状态

• toJson

将原始数据转换为 JSON 对象

tablex 组件

• 示例

<template>
    <!-- 引用 -->
    <el-tablex :options="options"></el-tablex>
</template>
<script>
export default {
    computed: {
        options: {
            // tablex 组件配置
        },
    },
};
</script>

• 多个 tablex 嵌套

<template>
    <!-- 引用 -->
    <el-tablex :options="options">
        <!-- 嵌套的 tablex 使用插槽，options 与 tablex 属性需要使用作用域变量传入 -->
        <el-tablex slot="table-details" slot-scope="scope" :options="scope.options" :tablex="scope.tablex"></el-tablex>
    </el-tablex>
</template>
<script>
export default {
    computed: {
        options: {
            // 省略部分代码...
            actions: {
                // 查看详情列表
                details: {
                    table: {
                        // 此处为嵌套 tablex
                    },
                },
            },
        },
    },
};
</script>

tablex 组件配置 tablex.Options (options 属性)

tablex.Model 模型配置

目前 model 、 condition.list 这两个组件配置项使用此模型配置，其中 model又分为 Visible（展示） 模式 与 Edit（编辑） 模式，但不是所有配置都适用。为方便阅读理解，在下面列表的适用配置项会用 model 、 condition 表示：

• 示例

<template>
    <el-tablex :options="options"></el-tablex>
</template>
<script>
export default {
    computed: {
        options(){
            return {
                // model 示例
                model: {
                    // 使用 type 为 $index 显示行号
                    $index: {
                        type: '$index',
                    },
                    // 此处 name 对应 配置里的 key
                    name: {
                        // type 默认为 tablex.String,
                        type: 'String',
                        label: '姓名',
                    },
                    sex: {
                        type: 'Radio',
                        label: '性别',
                        // 由于性别需要单选，这里传入数据来源
                        data: [
                            // 第一个参数，性别列表，对应 tablex.Raido 构造函数的 options 参数
                            [{
                                label: '男',
                                // 注意此处 value 值必须为 String 类型
                                value: '0',
                            }, {
                                label: '女',
                                value: '1',
                            }],
                        ],
                    },
                    // 使用展开行，因为 expand 在一个数据模型里最多只能存在一个，所以可以直接使用 key 作为 type 类型
                    expand: {
                        model: {
                            age: {
                                label: '年龄',
                            },
                            address: {
                                label: '地址',
                                props: {
                                    // 使用多行文本框
                                    type: 'textarea',
                                },
                            },
                        },
                    },
                },
                // condition 查询条件示例
                condition: {
                    list: [{
                        key: 'name',
                        label: '姓名',
                    }],
                },
            };
        },
    },
};
</script>

tablex.Operation 配置

• 示例

<template>
    <el-tablex :options="options">
        <!-- 使用插槽 -->
        <el-button slot="operation-delete" slot-scope="scope" @click="deleteRow(scope)" type="danger" icon="el-icon-delete-solid" circle></el-button>
    </el-tablex>
</template>
<script>
export default {
    computed: {
        options() {
            return {
                operation: {
                    list: [{
                        key: 'edit',
                        label: '修改',
                        trigger: scope => {
                            // 通过 scope.row 可以获取当前操作的数据
                        },
                    }， {
                        // 使用插槽
                        key: 'delete',
                    }],
                },
            };
        },
    },
    methods: {
        deleteRow(scope) {
            // 通过 scope.row 可以获取当前操作的数据
        },
    },
};
</script>

tablex.Action 配置

tablex 所有的交互都是围绕 action 开展的，通过 action 驱动增删改查及各种操作

tablex 内置了四种常用的 action ：

• select （查询）select 是 tablex 表格的数据来源
• insert （新增）
• edit （修改）
• delete （删除）

• 示例

<template>
    <el-tablex :options="options"></el-tablex>
</template>
<script>
import axios from 'axios';

export default {
    computed: {
        options() {
            return {
                operation: {
                    list: [{
                        // 更新状态操作按钮
                        key: 'status',
                        trigger: scope => scope.action('updateStatus', scope, {
                            id: scope.row.id,
                        }),
                    }, {
                        // 查看详情列表操作按钮
                        key: 'details',
                        trigger: scope => scope.action('getDetails', scope, {
                            id: scope.row.id,
                        }),
                    }],
                },
                actions: {
                    // 查询数据
                    select: {
                        // 此接口为注册 tablex 时由全局配置 request.map 传入
                        method: 'getData',
                    },
                    // 自定义 action
                    // 更新状态
                    updateStatus: {
                        // 使用自定义回调
                        method: async (params, scope) => {
                            // 自定义请求
                            const res = await axios.post('http://XXXX/updateStatus', {
                                params,
                            });
                            // 响应数据必须返回
                            return res;
                        },
                    },
                    // 查看详情列表
                    getDetails: {
                        // 使用表格展示
                        table: {
                            options: {
                                actions: {
                                    select: {
                                        method: 'getDetails',
                                    },
                                },
                            },
                        },
                    },
                },
            };
        },
    },
};
</script>

tablex 事件

插槽

完整示例

• main.js

import 'babel-polyfill';
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueI18n from 'vue-i18n';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import tablex from '@~crazy/tablex';

Vue.use(VueI18n);
Vue.use(ElementUI, {
    size: 'mini',
});

const i18n = new VueI18n({
    locale: 'zh-cn',
    silentTranslationWarn: true,
    messages: {
        'zh-cn': {},
        en: {},
    },
});

Vue.use(tablex, {
    i18n,
    request: {
        map: {
            getApiList: 'get',
            getApiData: 'get',
        },
        axios: {
            defaults: {
                baseURL: 'https://crazy-gt.com/crazy-api/',
            },
        },
    },
    table: {
        responseFormat: res => {
            return {
                ...res,
                total: res.total || res.data.length,
            };
        },
    },
});

Vue.config.productionTip = false

new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
}).$mount('#app')

• app.vue

<template>
    <el-tablex :options="options">
        <!-- 自定义数据源内容 -->
        <el-tag v-if="scope.row.data_source" slot="column-data_source" slot-scope="scope">{{scope.row.data_source}}</el-tag>
        <!-- 自定义是否为列表内容 -->
        <el-tag slot="column-is_list" slot-scope="scope" :type="scope.row.is_list ? 'success' : 'danger'">{{scope.row.is_list}}</el-tag>
        <!-- 自定义嵌套 tablex 内容 -->
        <el-tablex slot="table-details" slot-scope="scope" :options="scope.options" :tablex="scope.tablex">
            <div slot="column-content" slot-scope="scope" class="column-content">{{scope.row.content}}</div>
        </el-tablex>
        <el-tablex slot="table-list" slot-scope="scope" :options="scope.options" :tablex="scope.tablex">
            <!-- 自定义数据源内容 -->
            <el-tag v-if="scope.row.data_source" slot="column-data_source" slot-scope="scope">{{scope.row.data_source}}</el-tag>
            <!-- 自定义是否为列表内容 -->
            <el-tag slot="column-is_list" slot-scope="scope" :type="scope.row.is_list ? 'success' : 'danger'">{{scope.row.is_list}}</el-tag>
        </el-tablex>
    </el-tablex>
</template>
<script>
export default {
    computed: {
        model() {
            return {
                id: {},
                no: {
                    label: '编号',
                },
                name: {
                    label: '名称',
                },
                data_source: {
                    label: '数据源',
                },
                is_list: {
                    type: 'Radio',
                    label: '是否为列表',
                    data: [
                        [{
                            label: '否',
                            value: false,
                        }, {
                            label: '是',
                            value: true,
                        }],
                    ],
                },
            };
        },
        options() {
            return {
                multiple: true,
                model: this.model,
                operation: {
                    list: [{
                        key: 'details',
                        label: '查看详情',
                        trigger: scope => scope._self.action('details', scope, scope.row),
                        visible: scope => !scope.row.is_list,
                    }, {
                        key: 'list',
                        label: '列表详情',
                        trigger: scope => scope._self.action('list', scope, scope.row),
                        visible: scope => scope.row.is_list,
                    }],
                },
                actions: {
                    select: {
                        // 使用回调函数自定义数据
                        method: async ({
                            page,
                            size,
                        }) => {
                            const {
                                data,
                            } = await this.$tablex.api.getApiList().send();
                            return {
                                data: [...data].splice((page - 1) * size, size),
                                total: data.length,
                            };
                        },
                    },
                    list: {
                        table: {
                            title: '列表详情',
                            options: {
                                model: this.model,
                                actions: {
                                    select: {
                                        method: params => ({
                                            data: params.list,
                                        }),
                                    },
                                },
                                paging: {
                                    visible: false,
                                },
                            },
                        },
                    },
                    details: {
                        // 嵌套的 tablex
                        table: {
                            title: '查看详情',
                            options: {
                                model: {
                                    no: {
                                        label: '编号',
                                    },
                                    type: {
                                        label: '类型',
                                    },
                                    content: {
                                        label: '数据内容',
                                    },
                                },
                                actions: {
                                    select: {
                                        method: 'getApiData',
                                        sendParams: ['id'],
                                    },
                                },
                                paging: {
                                    visible: false,
                                },
                            },
                        },
                    },
                },
            };
        },
    },
}
</script>
<style lang="scss">
.column-content {
    background: #333;
    color: #FFF;
    padding: 10px;
    border-radius: 4px;

}
</style>