jm-table

An ui project base on Vue.js

用法

npm install jm-table --save

main.js

import JmTable from 'jm-table'
Vue.use(JmTable)

import { UTable, UTableColumn } from 'umy-ui';
Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);

页面引入组件示例

<template>
    <div id="app">
        <Jm-table 
            ref="subTableInParent"
            :condition="condition"
            labelWidth="80px"
            @selection-change="onSelectionChange"
            @action-click="onClickAction"
            @col-click="onColAction"
            @on-query="loadData"
            @upload="onUpload">
            <div slot="search">
                <el-col :span="8" style="width:280px">
                    <el-form-item label="提货单号" prop="search_LIKE_containerNo">
                        <el-input type="text" v-model="moreData.form['search_LIKE_containerNo']" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" style="width:280px">
                    <el-form-item label="提货单号" prop="search_LIKE_containerNo">
                        <el-input type="text" v-model="moreData.form['search_LIKE_containerNo1']" clearable></el-input>
                    </el-form-item>
                </el-col>
            </div>
        </Jm-table>
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {
            condition: {
                sortType: '-createDateTime' // 默认后端排序
                iDisplayStart: 1, // 分页当前页
                iDisplayLength: 5 // 分页每页长度
            },
            tableData: [
                {
                    unitName: '奔友科技',
                    date: '2021-02-02',
                    daterange: '2021-02-02',
                    proJectTotal: '王小虎',
                    isNo: '是',
                    hehe: 'hehe',
                },
                {
                    unitName: '本有科技',
                    date: '2021-02-04',
                    daterange: '2021-02-04',
                    proJectTotal: '王小虎',
                    isNo: '否',
                    hehe: '1231',
                },
                {
                    unitName: '本有科技',
                    date: '2021-02-04',
                    daterange: '2021-02-04',
                    proJectTotal: '王小虎',
                    isNo: '否',
                    hehe: '1231',
                },
                {
                    unitName: '本有科技',
                    date: '2021-02-04',
                    daterange: '2021-02-04',
                    proJectTotal: '王小虎',
                    isNo: '否',
                    hehe: '1231',
                },
                {
                    unitName: '本有科技',
                    date: '2021-02-04',
                    daterange: '2021-02-04',
                    proJectTotal: '王小虎',
                    isNo: '否',
                    hehe: '1231',
                },
                {
                    unitName: '本有科技',
                    date: '2021-02-04',
                    daterange: '2021-02-04',
                    proJectTotal: '王小虎',
                    isNo: '否',
                    hehe: '1231',
                },
                {
                    unitName: '本有科技',
                    date: '2021-02-04',
                    daterange: '2021-02-04',
                    proJectTotal: '王小虎',
                    isNo: '否',
                    hehe: '1231',
                },
            ],
            columns: [
                {
                    title: '输入框',
                    prop: 'unitName', //后台返回的key
                    width: '200',
                    required: false, //是否出现“*”
                    cellRender: 'input', //返回的值为text/input（输入框）/select（下拉框）/date（日期插件）
                    sortAbled: true, //能否排序
                    sortOrder: 'desc', //按照哪种方式排序
                    filterAbled: true, //能否过滤
                    filterValue: '', // 过滤改变后的值
                    filterPanelVisible: false, // 过滤框是否显示
                    filterParam: 'search_LET_status1', //过滤字段名
                    clickAbled: true //当前列是否可以点击
                },
                {
                    title: '日期',
                    prop: 'date', //后台返回的key
                    width: '200',
                    required: false, //是否出现“*”
                    cellRender: 'date', //返回的值为text/input（输入框）/select（下拉框）/date（日期插件）
                    sortAbled: true, //能否排序
                    sortOrder: 'asc', //按照哪种方式排序
                    filterAbled: true, //能否过滤
                    filterValue: '', // 过滤改变后的值
                    filterPanelVisible: false, // 过滤框是否显示
                    filterParam: 'search_EQ_date'
                },
                {
                    title: '日期范围',
                    prop: 'daterange', //后台返回的key
                    width: '200',
                    popoverWidth: 320,
                    required: false, //是否出现“*”
                    cellRender: 'daterange', //返回的值为text/input（输入框）/select（下拉框）/date（日期插件）
                    sortAbled: true, //能否排序
                    sortOrder: 'desc', //按照哪种方式排序
                    filterAbled: false, //能否过滤
                    filterValue: '',
                    filterValue1: '',
                    filterPanelVisible: false, // 过滤框是否显示
                    filterParam: 'search_GET_date',
                    filterParam1: 'search_LET_date'
                },
                {
                    title: '下拉框',
                    prop: 'proJectTotal', //后台返回的key
                    width: '300',
                    required: false, //是否出现“*”
                    cellRender: 'select',
                    sortAbled: false, //能否排序
                    sortOrder: 'none', //按照哪种方式排序
                    filterAbled: true, //能否过滤
                    filterValue: '',
                    filterPanelVisible: false, // 过滤框是否显示
                    filterParam: 'search_LET_unitName',
                    selectOptions: [
                        {
                            value: '1',
                            label: '黄金糕',
                        },
                        {
                            value: '2',
                            label: '双皮奶',
                        },
                    ],
                },
                {
                    title: '下拉框对选',
                    prop: 'hehe', //后台返回的key
                    width: '',
                    required: false, //是否出现“*”
                    cellRender: 'select-multiple',
                    sortAbled: false, //能否排序
                    sortOrder: 'none', //按照哪种方式排序
                    filterAbled: true, //能否过滤
                    filterValue: '',
                    filterPanelVisible: false,
                    filterParam: 'search_LET_unitName',
                    selectOptions: [
                        {
                            value: '1',
                            label: '黄金糕',
                        },
                        {
                            value: '2',
                            label: '双皮奶',
                        },
                    ]
                },
                {
                    title: '单选框',
                    prop: 'isNo', //后台返回的key
                    width: '',
                    required: false, //是否出现“*”
                    cellRender: 'radio',
                    sortAbled: true, //能否排序
                    sortOrder: 'none', //按照哪种方式排序
                    filterAbled: true, //能否过滤
                    filterValue: '',
                    filterPanelVisible: false,
                    filterParam: 'search_LET_unitName',
                    selectOptions: [
                        {
                            value: '1',
                            label: '是',
                        },
                        {
                            value: '0',
                            label: '否',
                        },
                    ]
                },
            ],
            moreData: {
                hasShowPage: false, //是否显示分页
                totalPage: 0, // 总页数
                iDisplayStart: 1, // 当前页
                iDisplayLength: 10, // 每页长度
                currPageParam: 'iDisplayStart', // 当前页参数
                sizePagePaeam: 'iDisplayLength',  // 每页长度参数
                hasSearch: true, //是否显示表单搜索
                form: {}, //表单搜索对象
                actions: [ //操作栏显示列表
                    {
                        actionName: '编辑',
                        actionCode: 'edit',
                        actionAbled: false // 是否禁用按钮
                    },{
                        actionName: '取消',
                        actionCode: 'cancel',
                        actionAbled: false // 是否禁用按钮
                    }
                ],
                hasActionsMult: true, // 是否显示批量操作栏
                actionsMult: [ // 批量操列表
                    {
                        actionName: '接收',
                        actionCode: 'accept',
                        actionAbled: false // 是否禁用按钮
                    },{
                        actionName: '提交',
                        actionCode: 'submit',
                        actionAbled: false // 是否禁用按钮
                    },{
                        actionName: '导出',
                        actionCode: 'download',
                        excelName: '测试文件名', // excel导出名
                        map: new Map([ // excel导出数据map
                            ["unitName", "输入框"],
                            ["date", "日期"],
                            ["daterange", "日期范围"],
                            ["proJectTotal", "下拉框"]
                        ]),
                        actionAbled: false // 是否禁用按钮
                    },{
                        actionName: '导入',
                        actionCode: 'upload',
                        actionAbled: false
                    }
                ],
                hasActionStatus: true, // 是否显示状态检索栏
                defaultSearch: 'BXZ', // 状态栏默认选中项
                actionLabel: '状态', // 状态栏label,不显示则传空
                filterParam: 'search_LET_status', // 状态栏后端查询字段名
                actionStatus: [ // 状态栏列表
                    { 
                        statusName: '不限制',
                        statusCode: 'BXZ'
                    },
                    { 
                        statusName: '任务待接收', 
                        statusCode: 'DJS'
                    },
                    { 
                        statusName: '任务已拒绝', 
                        statusCode: 'BJJ'
                    }
                ],
                hasActionDate: true, // 是否显示日期检索栏
                defaultDateSearch: { dateName: '最近三天', dateCode: '3'}, // 默认日期选中项
                actionDateLabel: '放箱日期', // 日期栏label,不显示则传空
                filterStartParam: 'search_GET_date', // 日期栏后端查询字段名
                filterEndParam: 'search_LET_date', // 日期栏后端查询字段名
                form1: { // 日期栏检索对象
                    search_GET_date: '',
                    search_LET_date: ''
                },
                actionDate: [ // 日期栏列表
                    { dateName: '最近三天', dateCode: '3'},
                    { dateName: '最近一周', dateCode: '7'},
                    { dateName: '最近15天', dateCode: '15'},
                    { dateName: '最近一月', dateCode: '30'},
                    { dateName: '自定义', dateCode: 'ZDY'}
                ]
            }
        }
    },
    methods: {
        loadData(val) {
            console.log(val)
            const form = Object.assign({...this.condition},val)
            form.iDisplayStart = form.iDisplayStart-1 // 分页从0开始
            getAjaxApi(form).then(res=> {
                this.moreData.totalPage = res.data.iTotalRecords
                this.tableData = res.data.aaData
                this.refreshTable()
            })
        },
        refreshTable() {
            // 设置表头 第二个参数表示多选框列是否显示  第三个参数表示操作列是否显示
            this.$refs.subTableInParent.init(this.columns, true, true)
            // 设置表格数据 第二个参数：操作栏按钮列表
            this.$refs.subTableInParent.load(this.tableData,this.moreData)
        },
        // 多选框
        onSelectionChange(selectedRows) {},
        // 操作栏
        onClickAction(currentRow) {
            console.log(currentRow)
        },
        // 单元格点击
        onColAction(currentRow) {
            console.log(currentRow)
        },
        onUpload(param) {
            console.log(param)
        }
    },
    mounted () {
        this.loadData()
    }
}
</script>