Ying's Blog🍗
Appearance

AntDesignVue的坑和注意点

影大宝🧐2023-09-10 08:00:00前端开发antDesign

a-select下拉框不跟随页面滚动而移动的解决方法

 <a-select :getPopupContainer="triggerNode => triggerNode.parentNode">

a-select输入自动搜索下拉内容匹配

 <a-select
    show-search
    :filter-option="(input, option)=>option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0"
  >

a-table中快速设置全局缺省值

// 表格某一格没有数据时展示默认值
.ant-table-tbody {
  td:empty::after{
    content:'-'; 
  }
}

a-table中的column.ellipsis没有省略号

  1. 对于a标签的元素，表格中需要跳转的元素，若没有值就不能跳转的优化
  2. a标签的元素，hover上不提示优化：加上 title 属性修复
 <template slot="defaultOperationStationName" slot-scope="text,record">
  <span v-show="text">
    <a :title="record.defaultOperationStationNumber+'-'+text" @click="goStation(record.defaultOperationStationId)">
      {{record.defaultOperationStationNumber}}-{{text}}
    </a>
  </span>
  <span v-show="!text"> - </span>
</template>

a-table嵌套表格自定义展开图标

  • 利用父表格的expandIcon属性
template: :expandIcon="customExpandIcon"

methods:{
  customExpandIcon (props) {
    // 是否有子项，无子项不展示图标
    // record是每行的数据，后端返回的数据会有一个details字段判断是否有子项
    if (props.record && props.record.details) {
      // props.expanded a-table组件判断是否展开了为true是展开,false为没展开
      if (props.expanded) {
        // onClick事件必须添加上，相当于把a-table里的展开事件给了自定义的图标，不加的话点击会失效
        return <a-icon type="caret-down"  onClick={e => { props.onExpand(props.record, e) }} />
      } else {
        return <a-icon type="caret-right" onClick={(e) => { props.onExpand(props.record, e) }} />
      }
    } else {
      return <span style="padding-left: 21px;" />
    }
  },
}

a-table的翻页还能保存selectRows的思路

template  :row-selection="rowSelection

computed:{
  rowSelection(){
    return{
      selectedRowKeys:this.selectedRowKeys,
      onChange:this.onChange
    }
  }
},

onChange(selectedRowKeys,selectedRows) {
  this.selectedRowKeys = selectedRowKeys;
  if(selectedRowKeys.length===selectedRows.length){
    this.selectedList = selectedRows
  }else{
    this.selectedList = selectedRowKeys.map(key => (
      this.selectedList.find(row => row.id === key) || selectedRows.find(row => row.id === key)//处理翻页缓存
    ))
  }
},

v-decorator

  • 用于 a-form 的获取表单数据+表单验证
  • data 中定义校验规则，标签中 ['id',options]

INFO

  1. 不能和 v-model 一起使用，官方文档还有(如下)，英文版不懂，遇到实际问题再补充

  2. 使用 v-decorator 后，所有数据都会被 form 接管，对数据的修改要通过对 this.form.setFieldValue来实现

输入框中的v-model不能和default-value一起使用

: default-value和change事件结合赋值

a-table指定表头列的样式修改

/deep/.parentTable .ant-table-thead > tr >th:nth-child(2) { 
  width: 225px;
}
antd 表格 layout 样式更改
a-table嵌套表格父子选择框对齐

//第一步让子表格空隙处样式删除
/deep/tr.ant-table-expanded-row-level-1>td:first-child{
  display: none;
}
//第二步消除表格拉至尾处缺少空白bug,在表格数据成功的函数加上js
this.$nextTick(() => {
  let ele = this.$el.querySelectorAll('.childTable')
  ele.forEach(item=>{
      item.parentNode.setAttribute('colSpan', 8)//8看实际表格调整数目
  })
})

a-table嵌套表格父表格加key

  • 为了默认展开计算高度 添加唯一标识 之前用的是表格数据的长度 但如果切换数据长度一致 默认展开会失效
  • 嵌套表格的子组件不能用children等敏感词汇。涉及到底层逻辑，页面会多层渲染（🙄这个bug找了很久）
  • :default-value如果存在 不写v-model 改变值不会变更
ON THIS PAGE