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

功能介绍

双向绑定表格列数据，

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

引入说明

1. 安装组件 npm install @yinta/table-col-conf
2. 代码位置：https://git.yintaerp.com/yinta-fed/yinta-fed-docs/-/tree/dev/components/common/TableColConf
3. 如果过程中有什么问题，可以在这个公共的 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>

Select Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | -------- | ------ | ------ | ------ | | v-model | 绑定值 | Array | 必传 | 无 | | menu-url | 菜单路径 | String | 非必传 | 当前路径 | | env | 环境变量 | String | 非必传 | prod |

Select Events

| 事件名称 | 说明 | 类型 | | -------- | ---------------------------- | ---- | | save | 没有传 menu-url 时的保存回调 | 无 | | onload | 首次读取接口配置成功后回调 | 无 |