从实战里总结使用ant design vue的小技巧

2023-01-07 258

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 从实战里总结使用ant design vue的小技巧

真实的项目总是面临着各种各样的要求，没有时间去学习，只有上来就干，从实战中学习是最好的方式。

第一次使用新框架，总会有一些磕磕绊绊，即使有API介绍，但是有的不上手还真搞不懂，所以从实战中我也记录了一些使用的方式

表格Table

指定展开子数据的字段

官网中有这种有子孩子的，可以展开的树形操作，只有子数据是children字段才能展开

但是从后端返回，获取的数据里面，并没有children这个字段

此时可以使用childrenColumnName来指定子数据的字段名称：

从columns中控制显示的数据

角色是一个数组,一个人可以有多个角色,不使用插槽如何将多个角色名，显示在一个人下面？

如果使用插槽，可以利用 v-for 循环将名字便利出来，但是有一种更简单的方式：

可以在columns的角色字段里，写入customRender,customRender用于生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引

分页器

我感觉官网写的介绍看不懂，所以我用自己的话记录一下

先在表格的标签里定义这两个字段：

:pagination="pagination" //pagination是一个对象
 @change="tableChange" //点击进翻页的方法

然后在 data里定义 pagination 对象，并填充数据

total在获取后台数据的时候进行赋值，total是数据总条数

pagination:{ 
  total:0, 
  defaultPageSize:10, //默认一个表格展示几条数据
  showTotal: total => 共 ${total} 条数据, 
  showSizeChanger:true, 
  pageSizeOptions: ['5', '10', '15', '20'], 
  onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize 
 },

点击进行翻页：

this.fetch是获取后台数据的方法，并且传入参数

tableChange(e){
  this.fetch({
    page:e.current,
    page_size:e.pageSize
  })
  console.log('切换了',e)
}

从fetch传入翻页的信息，第几页，一页几条数据，fetch获取到数据后，就赋值给表格

点击行，进行跳转

需要在a-table里设置customRow事件,和事件名

再在methods里写点击事件

<a-table
  :columns="nextInterHead"
  :data-source="nextInterview"
  class="a-table"
  :pagination="false"
  :customRow="rowClick"
>
//methods里写,record就是点击的当前行信息
 rowClick(record){
      return{
        on:{
          click:()=>{
            //逻辑代码
            console.log("点击了",record)
            this.$router.push({
              path: '/candidate/detail',
              query: { id: record.id },
            })
          }
        }
      }
    }
  },

表单Form

表单有Form何FormModel两种类型，这两种类型的赋值方式，修改数据方式也不同，详细可参考文档

自定义表单校验

prop 与对应规则名字和$refs,要一致;校验规则的函数要写在data里面；校验规则名字要写在data的return里，并配置相关参数

<a-form-model-item ref="phone" label="手机号" prop="phone">
    <a-input
      placeholder="请填写手机号"
      v-model="form.phone"
      @blur="
        () => {
          $refs.phone.onFieldBlur();
        }
      "
    />
</a-form-model-item>
//在数据里写
  data() {
    //校验手机号
    let validatePhone = (rule, value, callback) => {
      let reg = /^1\d{10}$/ 
      if (value === '') {
        return callback(new Error('请输入手机号'));
      }else if(!reg.test(value)){
        return callback(new Error('请输入正确的手机号'));
      }
      callback()
    };
    //
    return {
        rules: {
            phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        },
    }
}

validator: 就是自定义校验意思 validatePhone 就是自定义校验规则的名字,是一个写在data里面,return上边的方法

表单赋值报错

You cannot set a form field before rendering a field associated with the value

使用 this.form.setFieldsValue 时,出现上述错误,这是我的代码

原因:

1. this.form.setFieldsValue 传值的时候只能是 form 中用到的参数,有可能是赋值多了

2.是因为在DOM节点还没有渲染好，就已经赋值了

解决方法是:

使用定时器

级联选择器Cascader

自定义子字段名，value与label

级联选择器在当作城市选择器的时候，省市县，需要自己从接口中获取数据，只用数据的字段为chldren的时候，才能正常显示市或县

但是有的时候，从后端获取的接口数据字段并不和api匹配，所以可以使用fieldNames指定字段名和数据名

可以这样进行配置

日期选择器

自定义日期格式

显示默认的时间 :要使用default-value和v-model搭配使用

format设置默认的日期格式

<a-date-picker
  @change="onChangeTime"
  format="YYYY-MM-DD"
  :default-value="form.establish_time? moment(form.establish_time,'YYYY-MM-DD'):null"
  v-model="form.establish_time"
  placeholder="请选择公司成立时间"
/>
import moment from 'moment';
  methods: {
    moment,
}
复制代码

日期如果带有时分秒,而后台需要的日期格式只有年月日的话需要使用moment和format转换日期格式

moment(date).format('YYYY-MM-DD')
复制代码

但是在显示原先选择的日期时可能报错:

解决方法:赋值日期时，使用moment函数进行格式化一下 item.import_date为日期

this.importTime = moment(item.import_date,'YYYY-MM-DD')
复制代码

框架的学习很碎很杂，在此只记录了一点点，还有很长的一段路要走