@yinta/table-col-conf NPM

UI2.0 自定义表格列弹窗（Vue3 版本）

功能介绍

双向绑定表格列数据，

支持显隐
支持排序
支持左侧固定
支持一键置顶
支持模糊搜索高亮
支持禁用属性

引入说明

安装组件 npm install @yinta/table-col-conf
代码位置：https://git.yintaerp.com/yinta-fed/yinta-fed-docs/-/tree/dev/components/common/TableColConf
如果过程中有什么问题，可以在这个公共的 git 仓库中提交修改。

在 vue.config.js 中加入配置以便能进行 babel 编译

module.exports = {
  transpileDependencies: ['@yinta/table-col-conf'],
};

// 引入
import TableColConf from '@yinta/table-col-conf';
// 注册
export default {
  components: {
    TableColConf,
  },
};

使用例子

传入 menu-url 就会默认调用 portal 的接口进去存取

<template>
  <table-col-config
    v-model:columns="colModel"
    menu-url="/test"
    :env="window?.ENV_CONFIG?.PROJECT_PROCESS_ENV || 'dev'"
    @save="mergeTableConfig"
  />
</template>

<script setup>
const sourceConfig = [
  { prop: 'planNo', label: '计划单号', width: 120, disabled: true },
  { prop: 'shippingName', label: '始发仓', width: 120 },
  { prop: 'destinationName', label: '目的仓', width: 120 },
  { prop: 'guiNumber', label: '集装箱号', width: 120 },
  { prop: 'fengNumber', label: '箱封号', width: 120 },
  { prop: 'shipmentID', label: 'ShipmentID', width: 120 },
  { prop: 'receivedSkuNum', label: '待收SKU种类数', width: 150 },
  { prop: 'receiptsSkuNum', label: '实收SKU种类数', width: 150 },
  { prop: 'receivedTotalNum', label: '待收总数量(PCS)', width: 150 },
  { prop: 'receiptsTotalNum', label: '实收总数量(PCS)', width: 150 },
  { prop: 'isDifferent', label: '是否差异', width: 120 },
  { prop: 'inBoundTime', label: '入库时间', width: 150 },
  { prop: 'status', label: '状态', width: 120 },
]
const colModel = ref(sourceConfig)

const mergeTableConfig = (newCol) => {
  const cache = new Map(sourceConfig.map((item) => [item.prop, item]))
  const tempCol = []
  newCol.forEach((item) => {
    tempCol.push({
      ...cache.get(item.prop),
      ...item,
      hidden: item.hidden
    })
  })
  colModel.value = tempCol
}
<script>