真实的项目总是面临着各种各样的要求，没有时间去学习，只有上来就干，从实战中学习是最好的方式。
第一次使用新框架，总会有一些磕磕绊绊，即使有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') 复制代码
框架的学习很碎很杂，在此只记录了一点点，还有很长的一段路要走
