这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战前端

前端框架层出不穷，虽然说万变不离其宗，但对于小白🤦🏻‍♂️来讲上手也须要一个过程vue

对于刚工做的我🤡来讲，第一次正式使用新框架，彻底靠本身摸索和百度，写了一个多月，也总结了一点东西，有些小细节仍是值得记录一下的，留个记念后端

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

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

表格Table

指定展开子数据的字段

官网中，有这种子节点能够展开的树形操做，但只有子数据是children字段才能展开可是从后端返回，获取的数据里面，并无children这个字段前端框架

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

从columns中控制显示的数据

角色是一个数组,一我的能够有多个角色,不使用插槽如何将多个角色名，显示在一我的下面？antd

若是使用插槽，能够利用 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 中用到的参数,有多是赋值多了

是由于在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')
复制代码

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

ant design vue 的实战应用与部分总结