一些ant框架使用的小tips

         const columns = [
        {
            title: '序号',
            scopedSlots: { customRender: 'serial' },
            width: 100,
        },
        {
            title: '样式名称',
            dataIndex: 'name',
            ellipsis: true,
            width: 100,
        },]

      export default {
            data(){
                     // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    const requestParameters = Object.assign({}, parameter,                     
                     this.queryParam)
                    //this.queryParam搜索变量
                    requestParameters.pageNum = requestParameters.pageNo;
                    return getIndexList(requestParameters)
                        .then(res => {
                            // console.log(res.result);
                            // this.color=
                            // this.color1=
                            return res.result
                        })
                },
                    }
        }
//页面上通过
<s-table
                :scroll="{x:1200}"
                ref='table'
                size='default'
                :rowKey= 'record=>record.id'
                :columns='columns'
                :data='loadData'
                :alert='true'
                :rowSelection='rowSelection'
                showPagination='auto'
            >

</s-table>
绑定columns元素 通过loadData方法 promise调取接口获取数据 绑定到表格上

//表格使用

        如果要在表格里使用比较复杂的例如图片等

     const columns = [     
        {
            title: 'logo',
            dataIndex: 'img',
            ellipsis: true,
             width: 100,
             scopedSlots: { customRender: 'img' }
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: '220px',
            scopedSlots: { customRender: 'action' },
        }]
//使用插槽
在页面上表格里设置对应的插槽
<!-- 表格 -->
            <s-table
                :scroll="{x:1200}"
                ref='table'
                size='default'
                :rowKey= 'record=>record.id'
                :columns='columns'
                :data='loadData'
                :alert='true'
                :rowSelection='rowSelection'
                showPagination='auto'>
                <!--:rowSelection='rowSelection'-->
                <span slot='serial' slot-scope='text, record, index'>
          {{ index + 1 }}
        </span>
        <!-- 图片插槽 -->
           <a-avatar shape='square'
                          icon='user'
                          slot='img'
                          slot-scope='text'
                          :src="text"/>
         <!-- 操作插槽 -->
        <span slot='action' slot-scope='text, record'>
          <template>
            <a @click='handleEdit(record)' v-action:update>编辑</a>
            <!-- 竖虚线 -->
            <a-divider type='vertical' />
             <a-popconfirm
                 title='确定将选择数据删除？'
                 ok-text='确定'
                 cancel-text='取消'
                 @confirm='handleDelete(record)'
                 v-action:delete>
                    <a>删除</a>
                </a-popconfirm>
                <!-- 竖虚线 -->
                 <a-divider type='vertical' />
                 <a @click='StopUse(record)' v-action:stop>禁用</a>
          </template>
        </span>
            </s-table>

From 表单

v-decorator（表单验证，内置绑定，初始值）

可通过 v-decorator 进行表单验证

//内置验证规则
<a-form-item label="课程名称"
             v-bind="formItemLayout">
   <a-input placeholder="课程名称"
            v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" />
</a-form-item>
//自定义验证规则01
<a-form-item>
  <a-input size="large"
           type="text"
           placeholder="手机号"
           v-decorator="['mobileNumber', 
           {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">
    <a-icon slot="prefix"
            type="mobile"
            :style="{ color: 'rgba(0,0,0,.25)' }" />
  </a-input>
</a-form-item>
//自定义验证规则02
<a-form-item   v-bind="formItemLayout"
	           label="手机号码">
	 <a-input placeholder="手机号码"
	          v-decorator="['mobileNumber',{rules: [{ required: true,max:11,message:'请输入正确格式的手机号码',validator:MobileNumberValidator}]}]" />
</a-form-item>

//在methods中设定方法
// 手机号验证
MobileNumberValidator (rule, value, callback) {
  const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/
  if (!idcardReg.test(value)) {
    // eslint-disable-next-line standard/no-callback-literal
    callback('非法格式')
  }
  // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
  callback()
}
//自定义验证规则03
                    <a-form-item label='编码'>
                       <a-input 
                     v-decorator="['catCode', validatorRules.catCode]"/>
                    </a-form-item>

在data中定义:
             validatorRules: {
                catCode: {//name与v-decorator中属性对应
                    // initialValue: "水",//初始化值，也就是默认值 
                    rules: [
                        { required: true, message: '请输入编码!' },//此处开启校验必填
               // { validator: (rule, value, callback) => validateDuplicateValue('em_project_info', 'project_name', value, this.model.id, callback) },//此处开启唯一验证，
                        { pattern:/^[a-zA-Z]+$/, message: '请输入英文字母!' },//此处配置正则表达式，手机号，可自己配置正则表达式
                    ]
                },
            }

//使用v-decorator 绑定下拉框时 不用另外设置v-model 已经在绑定阶段了

使用form表单时 v-decorator 相当于 v-model,所以使用  v-decorator 时不能使用v-model

 <a-form-item label='标志牌类别'>
                                <a-select
                          v-decorator="['catId', { rules: [{ required: true,                 
                           message: '请输入标志牌类别' }] }]" 
                                placeholder = "请选择标志牌类别">
          <a-select-option v-for= "item in typeList" :value="item.id :key="item.id">{{ item.name }}</a-select-option>
                                </a-select>
                        </a-form-item>

//下拉框的值已经绑定到catId子段上了

可通过 v-decorator 进行内置的双向绑定

数据填充（所有项）   this.form.setFieldsValue(data)
数据获取（所有项）   this.form.validateFields(async (errors, values) => {
                        //validateFields 表单验证
						  console.log(values)
					});

使用的template语法，form必须在data内定义

data() {
    return {
        form: this.$form.createForm(this),
    }
}

From 设置值

this.form.resetFields();//在点击 清空或重置按钮时调用的函数中使用

表单设置值前添加：this.form.resetFields();

设置值的方式是：this.form.setFieldsValue();

this.form.resetFields();
this.model = Object.assign({}, this.record);
this.$nextTick(() => {
  this.form.setFieldsValue(pick(this.model, 'nft_id', 'name', 'havenum', 'circulation'))
});

需要用到lodash库的pick函数 如果没有对应的字段会报错 一般用在修改回显

实例:

   // 编辑框
            handleEdit(record) {
                this.visible = true
                  // 判断弹出框信息
            this.isEdit = true
                console.log(record);
                this.$nextTick(() => {
                this.imageUrl = record.img
                this.form.setFieldsValue(pick(record, fields))
            })
        },
//将编辑框一行的record数据以及对应字段赋予from对象上 达到回显效果

// 纯小白上路 可以提意见 不能喷我!!!