Ant Design Vue使用中的注意项

码客说

发布于 2021-11-10 10:06:57

1.5K0

发布于 2021-11-10 10:06:57

文章被收录于专栏：码客

官网

https://1.x.antdv.com/components/form-cn/

Table添加序号

每一页都从1开始

const tab_header = [
    {
        title: '序号',
        align: 'center',
        width: 100,
        customRender: (text,record,index) => `${index+1}`,
    },
]

分页连续自增序号


export default {
    name: "Index",
    data: function () {
        return {
            pagination: {
                current:1,
                total: 0,
                pageSize: 10,//每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
                showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
            },
            table_header: [
                {
                    title: '序号',
                    align: 'center',
                    width: 100,
                    customRender: (text, record, index) => {
                        //当前页数减1乘以每一页页数再加当前页序号+1
                        return (`${(this.pagination.current - 1) * (this.pagination.pageSize) + (index + 1)}`)
                    }
                },
                {
                    title: '角色名称',
                    dataIndex: 'name',
                    key: 'name',
                },

            ],
            table_data: [],
        }
    }
}

表单赋值

Object.assign(this.form_data, {
    name: "", code: "", remark: ""
})
await this.$nextTick();
this.form.setFieldsValue(this.form_data);

注意

赋值传的对象的属性不能比表单需要的属性多，所以如果修改时后台返回的字段多的话，就要筛选。所以建议实体类的属性和表单中的完全一致，其它的字段分开存储。

这里就写了一个工具类

export const my_assign = function (target, source) {
  let keys = Object.keys(source);
  for (const key of keys) {
    if (target.hasOwnProperty(key)) {
      target[key] = source[key];
    }
  }
}

使用

import {my_assign} from "@/utils/obj_util";
my_assign(this.form_data, data);
await this.$nextTick();
this.form.setFieldsValue(this.form_data);

分页

模板

<a-table 
         :rowKey="record=>record.id" 
         :columns="table_header" 
         :data-source="table_data" 
         :pagination="pagination" 
         @change="handleTableChange">
    <template slot="operation" slot-scope="text, record">
        <a href="javascript:;" @click="edit_role_click(record)">修改</a>
        <a-popconfirm
                      title="确定要删除吗?"
                      @confirm="() => del_role_click(record)"
                      >
            <a href="javascript:;">删除</a>
        </a-popconfirm>
    </template>
</a-table>

export default {
    name: "Index",
    data: function () {
        return {
            pagination: {
                current:1,
                total: 0,
                pageSize: 10,//每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
                showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
            },
            table_header: [
                {
                    title: '角色名称',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '角色代码',
                    dataIndex: 'code',
                    key: 'code',
                    ellipsis: true,
                },
                {
                    title: '备注',
                    dataIndex: 'remark',
                    key: 'remark',
                    ellipsis: true,
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    width: 120,
                    scopedSlots: {customRender: 'operation'},
                },
            ],
            table_data: [],
        }
    },
    methods: {
        handleTableChange(pagination) {
            Object.assign(this.pagination, pagination);
            this.get_role_list();
        },
        async get_role_list() {
            let res = await role_list(
                this.pagination.pageNum,
                this.pagination.pageSize
            );
            let data = res.data;

            this.table_data = data;
            this.pagination.total = res.totalCount/1;
        },
        async edit_role_click(record) {

        },
        async del_role_click(record) {
            let id = record.id;
        },
    }
}

错误1

Invalid prop: custom validator check failed for prop “pagination”

这种问题一般都是后台返回的数据有问题

我这里直接这样处理,就算后端返回的数据有问题也不会报错了。

this.pagination.total = res.totalCount/1;

错误2

Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.]

table里加 :rowKey="record=>record.id"

<a-table  
         :rowKey="record=>record.id" 
         :columns="table_header" 
         :data-source="table_data" 
         :pagination="pagination"
         @change="handleTableChange">
</a-table>

From

<template>
  <a-form
    id="components-form-demo-validate-other"
    :form="form"
    v-bind="formItemLayout"
    @submit="handleSubmit"
  >
    <a-form-item label="Plain Text">
      <span class="ant-form-text">
        China
      </span>
    </a-form-item>
    <a-form-item label="Select" has-feedback>
      <a-select
        v-decorator="[
          'select',
          { rules: [{ required: true, message: 'Please select your country!' }] },
        ]"
        placeholder="Please select a country"
      >
        <a-select-option value="china">
          China
        </a-select-option>
        <a-select-option value="usa">
          U.S.A
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="Select[multiple]">
      <a-select
        v-decorator="[
          'select-multiple',
          {
            rules: [
              { required: true, message: 'Please select your favourite colors!', type: 'array' },
            ],
          },
        ]"
        mode="multiple"
        placeholder="Please select favourite colors"
      >
        <a-select-option value="red">
          Red
        </a-select-option>
        <a-select-option value="green">
          Green
        </a-select-option>
        <a-select-option value="blue">
          Blue
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="InputNumber">
      <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
      <span class="ant-form-text">
        machines
      </span>
    </a-form-item>

    <a-form-item label="Switch">
      <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
    </a-form-item>

    <a-form-item label="Slider">
      <a-slider
        v-decorator="['slider']"
        :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
      />
    </a-form-item>

    <a-form-item label="Radio.Group">
      <a-radio-group v-decorator="['radio-group']">
        <a-radio value="a">
          item 1
        </a-radio>
        <a-radio value="b">
          item 2
        </a-radio>
        <a-radio value="c">
          item 3
        </a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="Radio.Button">
      <a-radio-group v-decorator="['radio-button']">
        <a-radio-button value="a">
          item 1
        </a-radio-button>
        <a-radio-button value="b">
          item 2
        </a-radio-button>
        <a-radio-button value="c">
          item 3
        </a-radio-button>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="Checkbox.Group">
      <a-checkbox-group
        v-decorator="['checkbox-group', { initialValue: ['A', 'B'] }]"
        style="width: 100%;"
      >
        <a-row>
          <a-col :span="8">
            <a-checkbox value="A">
              A
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox disabled value="B">
              B
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="C">
              C
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="D">
              D
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="E">
              E
            </a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-form-item>

    <a-form-item label="Rate">
      <a-rate v-decorator="['rate', { initialValue: 3.5 }]" allow-half />
    </a-form-item>

    <a-form-item label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
      <a-upload
        v-decorator="[
          'upload',
          {
            valuePropName: 'fileList',
            getValueFromEvent: normFile,
          },
        ]"
        name="logo"
        action="/upload.do"
        list-type="picture"
      >
        <a-button> <a-icon type="upload" /> Click to upload </a-button>
      </a-upload>
    </a-form-item>

    <a-form-item label="Dragger">
      <div class="dropbox">
        <a-upload-dragger
          v-decorator="[
            'dragger',
            {
              valuePropName: 'fileList',
              getValueFromEvent: normFile,
            },
          ]"
          name="files"
          action="/upload.do"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            Click or drag file to this area to upload
          </p>
          <p class="ant-upload-hint">
            Support for a single or bulk upload.
          </p>
        </a-upload-dragger>
      </div>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data: () => ({
    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    },
  }),
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'validate_other' });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    normFile(e) {
      console.log('Upload event:', e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
  },
};
</script>
<style>
#components-form-demo-validate-other .dropbox {
  height: 180px;
  line-height: 1.5;
}
</style>

展示效果