中建Vue3工具文档

Appearance

On this page

comm-table ​

属性 ​

属性名说明类型默认值
columns用于配置查询条件和表格列ColumnProps[]null
res-data表格数据array[]
page默认第几页number1
limit每页展示大小number20
page-sizes分页条设置array[20, 100, 200, 300, 500]
layout分页条部件stringtotal, sizes, prev, pager, next, jumper
options传给表格的额外属性TableOptions
background是否为分页按钮添加背景色booleantrue
autoScroll分页查询后是否自动滚动(不生效)booleantrue

ColumnProps ​

属性名说明类型默认值
prop字段名string--
label列名string--
align对齐方式string left/center/rightleft
width列宽string--
min-width最小列宽string--
fixed列是否固定在左侧或者右侧，true 表示固定在左侧 true, left, rightstring, boolean--
sortable对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件boolean, string true, false, 'custom'false
slot插槽名称string--
render自定义列渲染函数，优先级 render > formatter > formatDateFunction--
formatter格式化函数 参数(行，列)Function--
formatDate格式化日期 参数(列值)Function--

配置参考 ​

js
columns: [
    {prop: "itemCode", label: "商品编码", width: "150", sortable: "custom"},
    {prop: "skuName", label: "商品名称", width: "230", sortable: "custom"},
    {prop: "customerName", label: "所属客户", width: "150", sortable: "custom"},
    {prop: "goodsNo", label: "货号", width: "150", sortable: "custom"},
    {
        prop: "isBatchMgmt", label: "批次管理", width: "100", sortable: "custom", render: (h, ctx) => {
            if (ctx.row.isBatchMgmt == "N") {
                return h('div', {class: '', style: "color:green"}, [
                    h("label", {}, "否")
                ])
            } else {
                return h('div', {class: '', style: "color:red"}, [
                    h("label", {}, "是")
                ])
            }
        }
    },
    {
        prop: "isQuoteBatchCode", label: "引用外部批次", width: "100", sortable: "custom", render: (h, ctx) => {
            if (ctx.row.isQuoteBatchCode == "N") {
                return h('div', {class: '', style: "color:green"}, [
                    h("label", {}, "否")
                ])
            } else {
                return h('div', {class: '', style: "color:red"}, [
                    h("label", {}, "是")
                ])
            }
        }
    },
    {
        prop: "isShelfLifeMgmt", label: "效期管理", width: "100", sortable: "custom", render: (h, ctx) => {
            if (ctx.row.isShelfLifeMgmt == "N") {
                return h('div', {class: '', style: "color:green"}, [
                    h("label", {}, "否")
                ])
            } else {
                return h('div', {class: '', style: "color:red"}, [
                    h("label", {}, "是")
                ])
            }
        }
    },
    {
        prop: "shelfLifeType", label: "管理方式", width: "120", sortable: "custom", formatter: (row) => {
            if (row.shelfLifeTypeName == "默认") {
                return "";
            } else {
                return row.shelfLifeTypeName;
            }
        }
    },
    {prop: "shelfLife", label: "保质期", width: "100", sortable: "custom"},
    {
        prop: "batchTimeType", label: "时间类型", width: "120", sortable: "custom", formatter: (row) => {
            if (row.batchTimeTypeName == "默认") {
                return "";
            } else {
                return row.batchTimeTypeName;
            }
        }
    },
    {
        prop: "isSNMgmt", label: "SN管理", width: "100", sortable: "custom", render: (h, ctx) => {
            if (ctx.row.isSNMgmt == "N") {
                return h('div', {class: '', style: "color:green"}, [
                    h("label", {}, "否")
                ])
            } else {
                return h('div', {class: '', style: "color:red"}, [
                    h("label", {}, "是")
                ])
            }
        }
    },
    {
        prop: "entryCollectSN", label: "入库采集SN", width: "120", sortable: "custom", render: (h, ctx) => {
            if (!ctx.row.entryCollectSN) {
                return h('div', {class: '', style: "color:green"}, [
                    h("label", {}, "否")
                ])
            } else {
                return h('div', {class: '', style: "color:red"}, [
                    h("label", {}, "是")
                ])
            }
        }
    },
    {
        prop: "stockoutCollectSN", label: "出库采集SN", width: "120", sortable: "custom", render: (h, ctx) => {
            if (!ctx.row.stockoutCollectSN) {
                return h('div', {class: '', style: "color:green"}, [
                    h("label", {}, "否")
                ])
            } else {
                return h('div', {class: '', style: "color:red"}, [
                    h("label", {}, "是")
                ])
            }
        }
    },
    {
        prop: "skuType", label: "商品类型", width: "100", sortable: "custom", formatter: (row) => {
            return row.skuTypeName
        }
    },
    {
        prop: "createType", label: "来源方式", width: "100", sortable: "custom", formatter: (row) => {
            return row.createTypeName
        }
    },
    {prop: "shortName", label: "简称", width: "130", sortable: "custom"},
    {prop: "brandName", label: "品牌", width: "150", sortable: "custom"},
    {prop: "supplierName", label: "供应商", width: "150", sortable: "custom"},
    {prop: "temperatureRangeDesc", label: "温区", width: "80", sortable: "custom"},
    {prop: "skuToMarketTime", label: "上市时间", width: "140", sortable: "custom"},
    {prop: "originAddress", label: "原产地", width: "120", sortable: "custom"},
    {prop: "pcs", label: "规格", width: "80", sortable: "custom"},
    {prop: "boxSize", label: "箱规", width: "80", sortable: "custom"},
    {prop: "length", label: "长 (厘米)", width: "100", sortable: "custom"},
    {prop: "width", label: "宽 (厘米)", width: "100", sortable: "custom"},
    {prop: "height", label: "高 (厘米)", width: "100", sortable: "custom"},
    {prop: "volume", label: "体积 (cm³)", width: "100", sortable: "custom"},
    {prop: "grossWeight", label: "毛重 (千克)", width: "110", sortable: "custom"},
    {prop: "categoryName", label: "商品类别", width: "130", sortable: "custom"},
    {prop: "safetyStock", label: "安全库存数", width: "120", sortable: "custom"},
    {prop: "tagPrice", label: "吊牌价", width: "120", sortable: "custom"},
    {prop: "retailPrice", label: "零售价", width: "120", sortable: "custom"},
    {prop: "costPrice", label: "成本价", width: "120", sortable: "custom"},
    {prop: "purchasePrice", label: "采购价", width: "120", sortable: "custom"},
    {
        prop: "isHazardousStr", label: "是否危险品", width: "120", sortable: "custom", render: (h, ctx) => {
            if (ctx.row.isHazardous == "N") {
                return h('div', {class: '', style: "color:green"}, [
                    h("label", {}, "否")
                ])
            } else {
                return h('div', {class: '', style: "color:red"}, [
                    h("label", {}, "是")
                ])
            }
        }
    },
    {prop: "packaging", label: "包装", width: "120", sortable: "custom"},
    {prop: "packagingEnv", label: "包装环境", width: "120", sortable: "custom"},
    {prop: "storage", label: "存储", width: "120", sortable: "custom"},
    {prop: "storageEnv", label: "存储环境", width: "120", sortable: "custom"},
    {prop: "createUserName", label: "创建人", width: "120", sortable: "custom"},
    {prop: "createTime", label: "创建时间", width: "140", sortable: "custom"},
    {prop: "skuId", label: "编号", width: "140", sortable: "custom"},
    {
        prop: 'action', label: '操作', align: 'center', minWidth: '100', fixed: "right", render: (h, ctx) => {
            return h('div', [
                h("el-button", {
                    props: {type: 'text', size: 'mini'},
                    on: {click: () => app.editSku(ctx.row.skuId)}
                }, "查看")
            ])
        }
    }
],

TableOptions ​

属性名说明类型默认值
show-summary是否在表尾显示合计行booleanfalse
heightTable 的高度number500
stripe是否为斑马纹 tablebooleanfalse
highlight-current-row是否要高亮当前行booleantrue
border是否带有纵向边框booleanfalse
lazy是否懒加载子节点数据booleanfalse
total-option需要统计的列{ label: '列名', color: 'red' }array[]
muti-select是否多选booleanfalse

事件 ​

事件名说明回调参数
pagination操作分页后触发--
handle-selection-change当选择项发生变化时会触发该事件selection
row-click当某一行被点击时会触发该事件{row, column, event}
dblclickRow当某一行被双击时会触发该事件{row, column, event}
contextmenu当某一行被鼠标右键点击时会触发该事件{row, column, event}
headClick当某一列的表头被点击时会触发该事件{column, event}
headcontextmenu当某一列的表头被鼠标右键点击时触发该事件{column, event}
row-change当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性currentRow
sort-change当表格的排序条件发生变化的时候会触发该事件--

方法 ​

方法名说明参数
mergePage将查询参数与分页参数进行合并,返回合并并符合后台规范的参数searchParam,type
  • 例子
    • mergePage
js
// 查询时 type 不传
// 重置时 type 传 reset
// 导出时 type 传 export
      onSearch(type) {
        // 调用table中的mergePage方法，获取到请求参数 param:请求后台参数
        const param = this.$refs['table'].mergePage(this.search, type)
        $.ajax({
            url: "/Sku/getCustomerSkuList",
            type: "post",
            data: JSON.stringify(param),
            success: function (res) {
                app.tableData = res;
            }
        })
    },

Released under the MIT License.

Copyright © 2023-present Su su