antdv使用问题

比较大的会单独放一个文章里面去

• # antdv表格v-show变为true后不显示表头

antdv v4.1.0 table可伸缩列不生效

按照官网的配置了仍然不生效，原来是个bug，如果不想升级版本，可以直接覆盖columns就行

function handleResizeColumn(w, column) {
  column.width = w;
  columns.value = columns.value.map((item) => { // 覆盖columns
    return item;
  });
}

或者升级一下就行，antdv的 更新日志 在 4.1.2 版本就修复了

4.1.2 #

🐞 修复 table resize 在 vue 3.4 下报错问题 #7291

🐞 修复 Segmented title 属性不显示问题 #7302

antdv table 数据新增一行不显示

出现原因：配置了pagination，数据量超过pageSize就不会展示了

解决方法：配置a-table的pagination为false，自行创建新的pagination组件

andtv 3.x form 表单调用 validateFields 指定参数 不生效

why we always need callback() in validator function at Form component? 为什么表单验证的 rules 中使用 validator 时，其方法体总是需要调用 callback()

validateFields 没有参数是校验整个表单，不会有问题。

如果是校验指定的参数，这个指定参数的校验又是特殊的携带额外参数的校验，然后没有反应，是因为没有调用 callback。

之前的写法：（不带参数是可以正常使用的）

checkName(rule, value) {
  if (!value) {
    return Promise.reject('error')
  }
  return Promise.resolve()
},

改正后的写法：（带参数的校验可以生效）

// <a-form-item label="label" :name="['diskgroup', index, 'disk']"
//  :rules="[{ required: true }, { validator: (rule, value, callback) => checkParam(value, index, callback) }]">

checkParam(value, index, callback) {
  if (!value) {
    callback('error')
    return
  }
  callback()
},

button, menu 和 tooltip 共用，disable 使 tooltip 不生效

套一层就行了

<a-tooltip :title="$t('xxx')">
  <div>
    <a-menu-item key="0" :disabled="xxx" @click="handleClick(record)"> {{ $t('xxx') }} </a-menu-item>
  </div>
</a-tooltip>