n20-common-lib 2.22.76 → 2.22.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.76",
+  "version": "2.22.78",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/InputNumber/README.md

@@ -8,10 +8,10 @@
 <template>
   <!-- 金额类型（默认） -->
   <InputNumber v-model="money" type="money" />
-  
+
   <!-- 比率类型 -->
   <InputNumber v-model="rate" type="rate" />
-  
+
   <!-- 纯数字类型 -->
   <InputNumber v-model="num" type="number" />
 </template>
@@ -19,24 +19,24 @@
 
 ## 属性说明
 
-| 属性名          | 类型            | 默认值               | 说明                                |
-| ------------ | ------------- | ----------------- | --------------------------------- |
-| value        | Number/String | undefined         | 绑定值                               |
-| stringMode   | Boolean       | false             | 高精度模式，非空绑定值和 input/change 事件值使用字符串 |
-| isString     | Boolean       | false             | stringMode 兼容别名；小数位超过15位时自动按 true 处理 |
-| type         | String        | 'money'           | 输入框类型，可选值：'money'、'rate'、'number' |
-| maxlength    | Number        | 16                | 最大输入长度                            |
-| min          | Number/String | -9999999999999.99 | 最小值限制；高精度模式可传字符串 |
-| max          | Number/String | 9999999999999.99  | 最大值限制；高精度模式可传字符串 |
-| step         | Number/String | 1                 | 步进值；高精度模式可传字符串 |
-| stepStrictly | Boolean       | false             | 是否严格按步进值递增/递减                     |
-| disabled     | Boolean       | undefined         | 是否禁用                              |
-| isClearable  | Boolean       | false             | 是否可清空                             |
-| placeholder  | String        | '请输入'             | 占位提示文本                            |
-| dNum         | Number        | undefined         | 小数位数，优先级低于format                  |
-| format       | String        | undefined         | 格式化字符串，如'0.00'表示保留2位小数            |
-| suffix       | String        | '%'               | 后缀文本，仅在type='rate'时有效             |
-| rangeAuto    | Boolean       | false             | 是否自动处理范围值                         |
+| 属性名       | 类型          | 默认值            | 说明                                                                                                  |
+| ------------ | ------------- | ----------------- | ----------------------------------------------------------------------------------------------------- |
+| value        | Number/String | undefined         | 绑定值                                                                                                |
+| stringMode   | Boolean       | false             | 高精度模式，非空绑定值和 input/change 事件值使用字符串                                                |
+| isString     | Boolean       | false             | stringMode 兼容别名；小数位超过15位时自动按 true 处理                                                 |
+| type         | String        | 'money'           | 输入框类型，可选值：'money'、'rate'、'number'                                                         |
+| maxlength    | Number        | 16                | 最大输入长度                                                                                          |
+| min          | Number/String | -9999999999999.99 | 最小值限制；高精度模式可传字符串                                                                      |
+| max          | Number/String | 9999999999999.99  | 最大值限制；高精度模式可传字符串                                                                      |
+| step         | Number/String | 1                 | 步进值；高精度模式可传字符串                                                                          |
+| stepStrictly | Boolean       | false             | 是否严格按步进值递增/递减                                                                             |
+| disabled     | Boolean       | undefined         | 是否禁用                                                                                              |
+| isClearable  | Boolean       | false             | 是否可清空                                                                                            |
+| placeholder  | String        | '请输入'          | 占位提示文本                                                                                          |
+| dNum         | Number        | undefined         | 小数位数，优先级低于format；有效小数位超过15位时以字符串保持精度；显式字符串模式下与format、rangeAuto同时使用时表示最大小数位数 |
+| format       | String        | undefined         | 格式化字符串，如'0.00'表示保留2位小数；仅在显式字符串模式与dNum、rangeAuto同时使用时表示最少展示的小数位数              |
+| suffix       | String        | '%'               | 后缀文本，仅在type='rate'时有效                                                                       |
+| rangeAuto    | Boolean       | false             | 是否自动处理范围值                                                                                    |
 
 ## 类型说明
 
@@ -62,18 +62,22 @@
 
 ## 事件
 
-| 事件名    | 说明          | 回调参数 |
-| ------ | ----------- | ---- |
-| input  | 值改变时触发      | 当前值  |
-| change | 值改变且失去焦点时触发 | 当前值  |
-| blur   | 失去焦点时触发     | -    |
-| clear  | 清空时触发       | -    |
+当有效小数位设置超过 15 位时，组件会自动使用字符串模式，`input` 和 `change` 回传字符串，避免 JavaScript `Number` 丢失精度。设置 `stringMode` 或 `isString` 为 `true` 后，无论小数位数多少，`input` 和 `change` 都回传字符串；清空时保持原有行为，回传 `undefined`。
+
+当显式开启 `stringMode` 或 `isString`，且 `rangeAuto=true`、同时配置 `format` 和更大的 `dNum` 时，`format` 表示最少展示的小数位数，`dNum` 表示最多保留的小数位数。例如 `isString=true`、`format="0.000000"`、`dNum=20` 时，输入 `0.2` 显示为 `0.200000`，输入 7 至 20 位小数按实际位数显示，超过 20 位时按 20 位四舍五入。未显式开启字符串模式时，`format` 继续按历史规则强制模板精度。
+
+| 事件名 | 说明                   | 回调参数 |
+| ------ | ---------------------- | -------- |
+| input  | 值改变时触发           | 当前值   |
+| change | 值改变且失去焦点时触发 | 当前值   |
+| blur   | 失去焦点时触发         | -        |
+| clear  | 清空时触发             | -        |
 
 ## 方法
 
-| 方法名   | 说明       |
-| ----- | -------- |
-| focus | 使输入框获得焦点 |
+| 方法名 | 说明             |
+| ------ | ---------------- |
+| focus  | 使输入框获得焦点 |
 
 ## 使用示例
 
@@ -114,7 +118,7 @@
 
 ### 20 位小数汇率
 
-`stringMode` 和 `isString` 默认关闭，原有金额/利率的精度、数值事件保持原样。任一配置开启，或 `dNum` / `format` 超过 15 位安全小数位时，组件会自动进入高精度字符串模式。输入、回显、步进、范围比较和变更事件使用高精度十进制处理，失焦时按最大位数四舍五入并移除尾部 `0`，例如 `0.200000` 回传 `"0.2"`。
+`stringMode` 和 `isString` 默认关闭，原有金额/利率的精度、数值事件保持原样。任一配置开启，或按原有优先级计算出的有效小数位超过 15 位时，组件会进入高精度字符串模式。输入、回显、步进、范围比较和变更事件使用高精度十进制处理。
 
 下面 `cl-*` 是默认注册前缀；业务项目按自己的 `Vue.use(n20, { prefix })` 替换标签。
 
@@ -144,7 +148,7 @@ export default {
 
 - `stringMode` / `isString` 不改变 `dNum`、`format` 和 `maxlength` 默认值。`format` 仍优先于 `dNum`；有旧 `format` 配置时需同步调整。小数位超过 15 位时即使两个开关都为 `false`，也会自动使用字符串模式。
 - `maxlength` 统计全部字符，默认 16。20 位小数加上 `0.` 至少需要 22；按整数位、负号和小数点配置总长度。示例的 35 可容纳默认范围的 13 位整数、负号、小数点和 20 位小数。
-- 默认按十进制四舍五入到配置位数并移除尾部 `0`；`rangeAuto` 开启后至少按配置位数处理，并保留更多已有小数位。
+- 默认按十进制四舍五入到配置位数并移除尾部 `0`；显式字符串模式同时配置 `rangeAuto + format + 更大的 dNum` 时，按“最少 `format`、最多 `dNum`”处理并保留展示所需的尾零。
 - `min`、`max`、`step` 的字符串形式用于高精度模式；普通模式继续传 Number。`step` 使用正值。`stepStrictly` 的中点方向与原有 `Math.round` 一致。
 - 可粘贴科学计数法，提交展开为普通十进制字符串。空值、NaN、Infinity、非十进制输入不作为有效数字。
 - 按上下箭头改变输入框内容，提交时机与旧模式相同，在 change/blur 时同步绑定值。

package/src/components/InputNumber/index.vue

@@ -209,6 +209,18 @@ export default {
     }
   },
   methods: {
+    isAdaptivePrecision() {
+      return (this.stringMode || this.isString) &&
+        this.rangeAuto &&
+        this.format &&
+        (this.dNum || this.dNum === 0) &&
+        this.dNum > this.fNum
+    },
+    maxDecimalPlaces() {
+      return this.isAdaptivePrecision()
+        ? Math.max(this.fNum, this.dNum)
+        : this.fNum
+    },
     isStringMode() {
       return this.stringMode || this.isString || this.fNum > MAX_SAFE_DECIMAL_PLACES
     },
@@ -217,12 +229,24 @@ export default {
       const decimal = parseDecimal(value)
       if (!decimal) return ''
       // Decimal 会省略尾零，rangeAuto 额外保留普通十进制输入中的原始小数长度。
-      const fraction = String(originalValue).trim().match(/\.(\d+)$/)
+      const fraction = String(originalValue).replace(/,/g, '').trim().match(/\.(\d+)$/)
+      const originalPlaces = Math.max(decimal.decimalPlaces(), fraction ? fraction[1].length : 0)
       const places = this.rangeAuto
-        ? Math.max(this.fNum, decimal.decimalPlaces(), fraction ? fraction[1].length : 0)
+        ? Math.max(
+          this.fNum,
+          this.isAdaptivePrecision() ? Math.min(originalPlaces, this.maxDecimalPlaces()) : originalPlaces
+        )
         : this.fNum
-      // 先舍入再输出，并移除尾部 0，避免保存值与接口回显值不一致。
+      // 先按目标位数四舍五入，避免转成 Number 后丢失精度。
       const fixedValue = decimal.toDecimalPlaces(places).toFixed(places)
+      // format + dNum + rangeAuto 场景中，format 是最少位数，dNum 是最多位数。
+      // 保留补齐后的尾零，使回显和用户输入的小数位一致。
+      if (this.isAdaptivePrecision()) {
+        return decimal.toDecimalPlaces(places).isZero()
+          ? new Decimal(0).toFixed(places)
+          : fixedValue
+      }
+      // 其他高精度场景保留当前分支的规范化逻辑：移除尾部 0。
       const trimmedValue = fixedValue
         .replace(/(\.\d*?[1-9])0+$/, '$1')
         .replace(/\.0+$/, '')

package/src/components/Statis/index.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
     <div v-if="size !== 'mini'" class="flex-box p-t-ss p-b-ss">
-      <statisItem
-        :type="(label + '合计') | $lc"
-        :list="pageList"
-        :show-w="showW"
-        :show-u="showU"
-        :count-label="countLabel"
-      />
+      <statisItem :type="pageTotalLabel" :list="pageList" :show-w="showW" :show-u="showU" :count-label="countLabel" />
       <statisItem
         :type="'全部合计' | $lc"
         :list="totalList"
@@ -18,7 +12,7 @@
     </div>
     <div v-else class="n20-statis p-t-ss p-b-ss">
       <span class="m-r">
-        {{ (label + ':') | $lc }}<span class="n20-primary"> {{ pageSum }}</span> {{ '条' | $lc }}
+        {{ label + ':' }}<span class="n20-primary"> {{ pageSum }}</span> {{ '条' | $lc }}
       </span>
       <span class="m-r">
         {{ '全部:' | $lc }}<span class="n20-primary"> {{ totalSun }}</span> {{ '条' | $lc }}
@@ -28,9 +22,10 @@
 </template>
 
 <script>
-import { $lc } from '../../utils/i18n/index'
 import statisItem from './statisItem.vue'
 
+import { $lc } from '../../utils/i18n/index'
+
 export default {
   name: 'Statis',
   components: {
@@ -71,15 +66,19 @@ export default {
     },
     label: {
       type: String,
-      default: $lc("已选")
+      default: $lc('已选')
     }
   },
   computed: {
+    pageTotalLabel() {
+      const separator = ['zh', 'ja', 'th'].includes(this._lang || 'zh') ? '' : ' '
+      return this.label + separator + $lc('合计')
+    },
     unitAs() {
       if (!this.showU) {
         return undefined
       } else if (this.showU === true) {
-        return $lc("元")
+        return $lc('元')
       } else {
         return this.showU
       }
@@ -87,29 +86,29 @@ export default {
     pageList() {
       if (this.pageAmount !== undefined) {
         return [
-          { label: $lc("笔数"), value: this.pageSum },
+          { label: $lc('笔数'), value: this.pageSum },
           {
-            label: $lc("金额"),
+            label: $lc('金额'),
             value: this.pageAmount,
             unit: this.unitAs
           }
         ]
       } else {
-        return [{ label: $lc("笔数"), value: this.pageSum }]
+        return [{ label: $lc('笔数'), value: this.pageSum }]
       }
     },
     totalList() {
       if (this.totalAmount !== undefined) {
         return [
-          { label: $lc("笔数"), value: this.totalSun },
+          { label: $lc('笔数'), value: this.totalSun },
           {
-            label: $lc("金额"),
+            label: $lc('金额'),
             value: this.totalAmount,
             unit: this.unitAs
           }
         ]
       } else {
-        return [{ label: $lc("笔数"), value: this.totalSun }]
+        return [{ label: $lc('笔数'), value: this.totalSun }]
       }
     }
   }

package/src/components/Table/index.vue

@@ -174,7 +174,10 @@ export default {
   provide() {
     let bigData = this.bigData
     return {
-      bigData
+      bigData,
+      n20TableContext: {
+        getData: () => this.data || []
+      }
     }
   },
   watch: {

package/src/components/TableOperateColumn/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-table-column v-if="!bigData" v-bind="$attrs">
+  <el-table-column v-if="!bigData" v-bind="resolvedColumnAttrs">
     <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </el-table-column>
-  <ux-table-column v-else :field="$attrs.prop" :title="$attrs.label" v-bind="$attrs">
+  <ux-table-column v-else :field="$attrs.prop" :title="$attrs.label" v-bind="resolvedColumnAttrs">
     <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </ux-table-column>
 </template>
@@ -10,17 +10,143 @@
 <script>
 // import { $lc } from '../../utils/i18n/index'
 import OperateBtns from './OperateBtns.vue'
+
+const DEFAULT_OPERATE_COLUMN_MIN_WIDTH = 80
+
 export default {
   name: 'TableOperateColumn',
   components: {
     OperateBtns
   },
-  inject: { bigData: { default: false } },
+  inject: {
+    bigData: { default: false },
+    n20TableContext: { default: null }
+  },
   props: {
     btnList: {
       type: Array,
       default: () => []
     }
+  },
+  computed: {
+    resolvedColumnAttrs() {
+      const attrs = { ...this.$attrs }
+      const hasWidth =
+        Object.prototype.hasOwnProperty.call(attrs, 'width') &&
+        attrs.width !== null &&
+        attrs.width !== undefined &&
+        attrs.width !== ''
+      if (hasWidth) {
+        return attrs
+      }
+
+      const minWidthKey = ['minWidth', 'min-width'].find((key) => {
+        const value = attrs[key]
+        return Object.prototype.hasOwnProperty.call(attrs, key) && value !== null && value !== undefined && value !== ''
+      })
+      const calculatedWidth = this.calcOperateColumnWidth()
+      if (minWidthKey) {
+        const minWidth = this.parsePixelWidth(attrs[minWidthKey])
+        if (minWidth !== null) {
+          attrs[minWidthKey] = Math.max(calculatedWidth, minWidth)
+        }
+      } else {
+        // 避免 Element/UX Table 将大量剩余空间分配给操作列。
+        attrs.width = calculatedWidth
+      }
+      return attrs
+    }
+  },
+  methods: {
+    measureOperateText(text) {
+      const normalizedText = text === undefined || text === null ? '' : String(text)
+      if (!normalizedText) return 0
+
+      const fallbackWidth = Array.from(normalizedText).reduce(
+        (width, char) => width + (/[⺀-鿿]/.test(char) ? 14 : 8),
+        0
+      )
+      if (typeof document === 'undefined') return fallbackWidth
+
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      if (!context) return fallbackWidth
+
+      context.font = '14px PingFang SC, Microsoft YaHei, sans-serif'
+      return Math.max(context.measureText(normalizedText).width, fallbackWidth)
+    },
+    parsePixelWidth(value) {
+      if (typeof value === 'number') {
+        return Number.isFinite(value) && value >= 0 ? value : null
+      }
+      if (typeof value !== 'string') return null
+
+      const normalizedValue = value.trim()
+      if (!/^\d+(\.\d+)?(px)?$/.test(normalizedValue)) return null
+      const parsedValue = Number.parseFloat(normalizedValue)
+      return Number.isFinite(parsedValue) ? parsedValue : null
+    },
+    calcOperateColumnWidth() {
+      const CELL_HORIZONTAL_PADDING = this.bigData ? 20 : 16
+      // OperateBtns 使用行内元素，除 6px margin 外还会产生约 4px 的模板空白。
+      const BUTTON_GAP = 10
+      const CHILDREN_ARROW_WIDTH = 20
+      const MORE_BUTTON_WIDTH = 16
+      const buttons = (this.btnList || []).filter((button) => button && button.isHas !== false)
+      const getButtonWidth = (button) => {
+        let width = this.measureOperateText(button.label)
+        if (button.children && button.children.length > 0) {
+          width += CHILDREN_ARROW_WIDTH
+        }
+        return width
+      }
+      const buttonWidths = buttons.map(getButtonWidth)
+
+      if (buttonWidths.length === 0) {
+        return DEFAULT_OPERATE_COLUMN_MIN_WIDTH
+      }
+
+      const calcLayoutWidth = (inlineWidths, hasMoreButton = false) => {
+        const itemCount = inlineWidths.length + (hasMoreButton ? 1 : 0)
+        const contentWidth = inlineWidths.reduce((total, width) => total + width, 0)
+        const moreButtonWidth = hasMoreButton ? MORE_BUTTON_WIDTH : 0
+        const gapWidth = Math.max(itemCount - 1, 0) * BUTTON_GAP
+        return contentWidth + moreButtonWidth + gapWidth + CELL_HORIZONTAL_PADDING
+      }
+      const rows = this.n20TableContext?.getData?.() || []
+      if (rows.length > 0) {
+        const maxRowWidth = rows.reduce((maxWidth, row) => {
+          const visibleButtonWidths = buttons
+            .filter((button) => this.hasButton(button.isHas, row))
+            .map(getButtonWidth)
+          const rowWidth = visibleButtonWidths.length > 3
+            ? calcLayoutWidth(visibleButtonWidths.slice(0, 2), true)
+            : calcLayoutWidth(visibleButtonWidths)
+          return Math.max(maxWidth, rowWidth)
+        }, 0)
+        return Math.max(DEFAULT_OPERATE_COLUMN_MIN_WIDTH, Math.ceil(maxRowWidth))
+      }
+
+      const sortedButtonWidths = [...buttonWidths].sort((a, b) => b - a)
+      const directButtonsWidth = calcLayoutWidth(sortedButtonWidths.slice(0, 3))
+      const collapsedButtonsWidth =
+        sortedButtonWidths.length > 3 ? calcLayoutWidth(sortedButtonWidths.slice(0, 2), true) : 0
+
+      return Math.max(
+        DEFAULT_OPERATE_COLUMN_MIN_WIDTH,
+        Math.ceil(directButtonsWidth),
+        Math.ceil(collapsedButtonsWidth)
+      )
+    },
+    hasButton(isHas, row) {
+      if (isHas === undefined || isHas === null) return true
+      if (typeof isHas === 'boolean') return isHas
+      if (typeof isHas === 'function') return isHas(row)
+      if (typeof isHas === 'string' || Array.isArray(isHas)) {
+        return typeof this.$has === 'function' ? this.$has(isHas) : true
+      }
+      return false
+    }
   }
 }
 </script>

package/src/components/TablePro/index.vue

@@ -214,6 +214,13 @@ export default {
     empty,
     renderer
   },
+  provide() {
+    return {
+      n20TableProContext: {
+        getData: () => this.data || []
+      }
+    }
+  },
   props: {
     scrollY: {
       type: Object,

package/src/components/TableProOperateColumn/index.vue

@@ -1,19 +1,144 @@
 <template>
-  <vxe-column :field="$attrs.prop" :title="$attrs.label" v-bind="$attrs">
+  <vxe-column :field="$attrs.prop" :title="$attrs.label" v-bind="resolvedColumnAttrs">
     <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </vxe-column>
 </template>
 <script>
 import OperateBtns from './OperateBtns.vue'
 
+const DEFAULT_OPERATE_COLUMN_WIDTH = 180
+
 export default {
   name: 'TableProOperateColumn',
   components: { OperateBtns },
+  inject: {
+    n20TableProContext: {
+      default: null
+    }
+  },
   props: {
     btnList: {
       type: Array,
       default: () => []
     }
+  },
+  computed: {
+    resolvedColumnAttrs() {
+      const attrs = { ...this.$attrs }
+      const hasWidth =
+        Object.prototype.hasOwnProperty.call(attrs, 'width') &&
+        attrs.width !== null &&
+        attrs.width !== undefined &&
+        attrs.width !== ''
+      if (hasWidth) {
+        return attrs
+      }
+
+      const minWidthKey = ['minWidth', 'min-width'].find((key) => {
+        const value = attrs[key]
+        return Object.prototype.hasOwnProperty.call(attrs, key) && value !== null && value !== undefined && value !== ''
+      })
+      const calculatedWidth = this.calcOperateColumnWidth()
+      if (minWidthKey) {
+        const minWidth = this.parsePixelWidth(attrs[minWidthKey])
+        if (minWidth !== null) {
+          attrs[minWidthKey] = Math.max(calculatedWidth, minWidth)
+        }
+      } else {
+        attrs.width = calculatedWidth
+      }
+      return attrs
+    }
+  },
+  methods: {
+    measureOperateText(text) {
+      const normalizedText = text === undefined || text === null ? '' : String(text)
+      if (!normalizedText) return 0
+
+      const fallbackWidth = Array.from(normalizedText).reduce(
+        (width, char) => width + (/[⺀-鿿]/.test(char) ? 14 : 8),
+        0
+      )
+      if (typeof document === 'undefined') return fallbackWidth
+
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      if (!context) return fallbackWidth
+
+      context.font = '14px PingFang SC, Microsoft YaHei, sans-serif'
+      return Math.max(context.measureText(normalizedText).width, fallbackWidth)
+    },
+    parsePixelWidth(value) {
+      if (typeof value === 'number') {
+        return Number.isFinite(value) && value >= 0 ? value : null
+      }
+      if (typeof value !== 'string') return null
+
+      const normalizedValue = value.trim()
+      if (!/^\d+(\.\d+)?(px)?$/.test(normalizedValue)) return null
+      const parsedValue = Number.parseFloat(normalizedValue)
+      return Number.isFinite(parsedValue) ? parsedValue : null
+    },
+    calcOperateColumnWidth() {
+      const CELL_HORIZONTAL_PADDING = 14
+      const BUTTON_GAP = 6
+      const CHILDREN_ARROW_WIDTH = 20
+      const MORE_BUTTON_WIDTH = 16
+      const buttons = (this.btnList || []).filter((button) => button && button.isHas !== false)
+      const getButtonWidth = (button) => {
+        let width = this.measureOperateText(button.label)
+        if (button.children && button.children.length > 0) {
+          width += CHILDREN_ARROW_WIDTH
+        }
+        return width
+      }
+      const buttonWidths = buttons.map(getButtonWidth)
+
+      if (buttonWidths.length === 0) {
+        return DEFAULT_OPERATE_COLUMN_WIDTH
+      }
+
+      const calcLayoutWidth = (inlineWidths, hasMoreButton = false) => {
+        const itemCount = inlineWidths.length + (hasMoreButton ? 1 : 0)
+        const contentWidth = inlineWidths.reduce((total, width) => total + width, 0)
+        const moreButtonWidth = hasMoreButton ? MORE_BUTTON_WIDTH : 0
+        const gapWidth = Math.max(itemCount - 1, 0) * BUTTON_GAP
+        return contentWidth + moreButtonWidth + gapWidth + CELL_HORIZONTAL_PADDING
+      }
+      const rows = this.n20TableProContext?.getData?.() || []
+      if (rows.length > 0) {
+        const maxRowWidth = rows.reduce((maxWidth, row) => {
+          const visibleButtonWidths = buttons
+            .filter((button) => this.hasButton(button.isHas, row))
+            .map(getButtonWidth)
+          const rowWidth = visibleButtonWidths.length > 3
+            ? calcLayoutWidth(visibleButtonWidths.slice(0, 2), true)
+            : calcLayoutWidth(visibleButtonWidths)
+          return Math.max(maxWidth, rowWidth)
+        }, 0)
+        return Math.max(DEFAULT_OPERATE_COLUMN_WIDTH, Math.ceil(maxRowWidth))
+      }
+
+      const sortedButtonWidths = [...buttonWidths].sort((a, b) => b - a)
+      const directButtonsWidth = calcLayoutWidth(sortedButtonWidths.slice(0, 3))
+      const collapsedButtonsWidth =
+        sortedButtonWidths.length > 3 ? calcLayoutWidth(sortedButtonWidths.slice(0, 2), true) : 0
+
+      return Math.max(
+        DEFAULT_OPERATE_COLUMN_WIDTH,
+        Math.ceil(directButtonsWidth),
+        Math.ceil(collapsedButtonsWidth)
+      )
+    },
+    hasButton(isHas, row) {
+      if (isHas === undefined || isHas === null) return true
+      if (typeof isHas === 'boolean') return isHas
+      if (typeof isHas === 'function') return isHas(row)
+      if (typeof isHas === 'string' || Array.isArray(isHas)) {
+        return typeof this.$has === 'function' ? this.$has(isHas) : true
+      }
+      return false
+    }
   }
 }
 </script>