ant design vue使用随记

1. 动态更改组件数据，数据更改成功、但页面并没有更新，解决方法在组件change触发事件上增加强制更新
   

   this.$forceUpdate()

2. 使用a-input-number，限制只能输入0或正整数，配置:precision="0"
   

   <a-input-number
     placeholder="请输入"
     v-model="formData.leader_weight"
     :max="100"
     :min="0"
     @blur="onWeightChange"
   />

3. 修改a-input禁用后的默认颜色
   

  .ant-input[disabled] {
     background-color: #fff;
     color: rgba(0, 0, 0, 0.65);
   }

4. 某些组件样式更改不成功,添加样式穿透::v-deep
   

   ::v-deep .ant-steps-item-title{
     color: rgba(51,51,51,0.6)!important;
     font-size: 14px;
   }

5.在a-form-model-item下使用a-date-picker组件，选择日期，验证更新不及时
  可以在change事件中增加验证：
  eg:

   this.$refs.roleFormWork.validateField('time', (error) => {
     console.log(error)
   })

6. 使用a-table所有行展开，需添加配置defaultExpandAllRows,如无效可增加key，获取数据后再动态更改key值

   <a-table
     :defaultExpandAllRows="true"
     :columns="columns"
     :data-source="list"
     :row-key="record => record.id"
     size="middle"
     :pagination="false"
     :loading="loading"
     :key="tableKey"
    >
      <template slot="change_num" slot-scope="change_num">
        <span v-if="change_num==0">{{change_num}}</span>
        <span v-else-if="change_num>0" class="green">+{{change_num}}</span>
      </template>
   </a-table>

7. 使用a-date-picker组件，获取选择的日期值

   onChange(date, dateString) { // 选择时间
     this.entry_date = dateString
   },

8. 使用a-table,每行需要显示的数据过多，可增加scroll横向滚动查看

   <a-table
     :columns="columns"
     :row-key="(row) => row.id"
     :data-source="list.data"
     :pagination="false"
     :loading="loading"
     size="middle"
     :scroll="{ x: 1500 }"
   >
    </a-table>

9. a-table 树形表格加载数据默认勾选设置

  <a-table
    :columns="columns"
    :data-source="listData"
    :row-selection="{
      onChange,
      onSelect,
      onSelectAll,
      selectedRowKeys,
      getCheckboxProps,
    }"
      :expanded-row-keys.sync="expandedRowKeys"
      :rowKey="(record) => record.id"
      :pagination="false"
      :Key="tableKey"
      :defaultExpandAllRows="true"
  />

   getCheckboxProps(record) {
     return {
       props: {
         disabled: record.path ? true : false, // 禁用
         name: record.name,
         checked: this.selectedRowKeys.includes(record.id),//设置选中状态
       },
     }
   },

10. 使用弹出确认框

  this.$confirm({
    title: '确认提示',
    content: '是否需要保存当前页面信息？',
    okText: '保存并退出',
    cancelText: '取消',
    onOk:()=>{
      this.draftSubmit()
      this.backFunction()
    },
    onCancel:()=> {
      this.backFunction()
    },
  })