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

功能介绍

双向绑定表格列数据，

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

引入说明

安装组件 npm install @yinta/common-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/common-table-col-conf'],
};

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

使用例子

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

<template>
  <table-col-config
    v-model:columns="colModel"
    menu-url="/test"
    env="环境变量"
  />
</template>

<script setup>
const colModel = ref([
  { 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 },
])
<script>

Select Attributes

参数	说明	类型	默认值
v-model	绑定值	Array	无
menu-url	菜单路径	String	无
env	环境变量	String	'prod'

Select Events

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

yinta-fed / yinta-table-col-conf

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

功能介绍

引入说明

使用例子

Select Attributes

Select Events

简介

发行版

贡献者

近期动态

yinta-fed / yinta-table-col-conf .gitee-modal { width: 500px !important; }

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

功能介绍

引入说明

使用例子

Select Attributes

Select Events

简介

发行版

贡献者

近期动态

搜索帮助

yinta-fed / yinta-table-col-conf