关于antdv的使用笔记

1. 序号

如果需要在给表格标注序号

const columns = [
  {
    title: "序号",
    key: "index",
    dataIndex: "index",
    width: 80,
    align: "center",
    customRender: (text, record, index) => `${index + 1}`,
  },
]

2. 自定义操作

如果要有操作按钮

const columns = [
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
  }
]
//action对应的是scopedSlots中的customRender
// 然后在template中：
<a-table>
<span slot="action" slot-scope="text, record">
</span>
</a-table>

3. v-decorator基本使用

v-decorator是antdv的绑定表单的方式，不同于v-model，可以进行实时绑定，也可以进行表单校验

1. temeplate中绑定表单：

//template
<a-form :form="form"  @submit="initList"></a-form>
//script - data
 form: this.$form.createForm(this) //绑定表单数据

this.form.setFieldsValue报错You cannot set a form field before rendering a field associated with the value. 报错问题
考虑以下几种问题：
如果是在modal中，modal-dom还未生成，所以会报错

初始值是否已被别的值绑定

2. template中使用v-decorator

 <a-input
   allowClear
   placeholder="请输入"
   style="width: 150px"
   v-decorator="['deviceSn', { initialValue: '' }]"
 />
//在提交验证的validateFields中的fieldsValue中绑定一个变量deviceSn，初始值为空

3. 点击确认按钮提交验证

e是事件对象 有时候可能也没有，所以要加e&&e.preventDefault() 防止报错阻塞

    initList(e) {
     e && e.preventDefault();
     this.form.validateFields((err, fieldsValue) => {
// 如果添加了rule验证规则，在这里应首先确认是否有err
   //如果有err则return，提示用户检查,在用户视图下，此时会有标红提示(如果有写验证规则)
       if(err)return 
       //走到这里，验证已通过，fieldsValue即是template中表单组件中绑定的key,value则是用户输入的值
       console.log("fieldsValue :>> ", fieldsValue); 
       API(params).then((res) => {
         console.log("res :>> ", res);
       });
     });
   },

4. antdv表单验证常用api

1. this.form.getFieldsValue() :查看当前值,填写则返回对应的value，不填则返回所有的key/value
2. this.form.resetFields():重置所有值，常用于重置按钮
3. this.form.setFieldsValue():设置当前表单内各组件的值，常用于回填由ajax返回的数据，比如：编辑

5. 妙用computed

假如当前页面有多个表格，可以将表头参数写在computed中，此时可以根据切换的key作为核心变量，通过依赖不同的key来切换表头数据，同样可以根据这个key设置不同的表格参数进行不同的请求，填装不同的表格数据等等等等。。。

data(){
  return {
    key: 1
  }
}
// 定制表头
computed:{
// 根据不同的key切换不同的表头
  columns(){
        const columnsList = [
      ['key1','key1'],
      ['key2','key2'],
      ['key3','key3'],
    ]
    return columnsList[this.key +1]
  }
}

6. 表格分页

表格想要有分页切换功能，表格需要有change功能,需要有pagination属性

一个基本的具有分页器功能的表格

template:

      <a-table
        :pagination="pagination"
        @change="handleTableChange"
      >

data:

data(){
  return {
      //初始值
       pagination: {
        showQuickJumper: true,
        showSizeChanger: true,
        current: 1, //页数
        pageSize: 5, //每页总数
        total: 0, //条数总数
        pageSizeOptions: ["5", "10", "20", "30"],
        showTotal: (total) => `共 ${total} 条`,
      } 
  }
}

js:

// 表格的change方法
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination; //将此刻的pagination参数设置为当前的pagination参数
      this.initList();//再重新请求数据
    },
// 获取到请求数据后，将分页后的总条数填充至total里
initList(){
  const params = {
    ...
  }
API(params).then(res=>{
//此时res返回的数据里有total项，表示共多少条
this.pagination.total = res.total
})
}

7.表格溢出隐藏

设置ellipsis为true

ellipsis:true

8. 自定义表格回显

   {
    title: "资源格式",
    dataIndex: "dataType",
    key: "dataType",
    ellipsis: true,
    //y can also that
   //customRender: (v) => (v ? "是" : "否"),
    customRender: (_, record) => {
      return `${record.type}-${record.dataType}`;
    },

9. 自定义弹框底部

    <a-modal
      v-model="isShowModal"
      :closable="false"
      @cancel="isShowModal = false"
      :keyboard="false"
      width="800px"
      :maskClosable="false"
      @ok="isShowModal = false"
    >
      <a-table
        :rowKey="(_, index) => index"
        class="table"
        bordered
        :columns="interfaceLayoutApplyColumns"
        :data-source="tableResource"
        :pagination="false"
        :scroll="{ y: 160 }"
      />
      <div slot="footer">
        <a-button @click="isShowModal = false" type="default"> 关闭 </a-button>
      </div>
    </a-modal>

10. 自定义过滤条件

//在进行模糊查询时进行的搜索过滤
myFilters(v, opt) {
      // v ：用户输入值，opt：对应循环项
      return opt.componentOptions.children[0].text.includes(v);
},