官网
https://1.x.antdv.com/components/form-cn/
Table添加序号
每一页都从1开始
代码语言：javascript复制const tab_header = [
{
title: '序号',
align: 'center',
width: 100,
customRender: (text,record,index) => `${index 1}`,
},
]分页连续自增序号
代码语言：javascript复制
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: [],
}
}
}表单赋值
代码语言：javascript复制Object.assign(this.form_data, {
name: "", code: "", remark: ""
})
await this.$nextTick();
this.form.setFieldsValue(this.form_data);注意
赋值传的对象的属性不能比表单需要的属性多，所以如果修改时后台返回的字段多的话，就要筛选。 所以建议实体类的属性和表单中的完全一致，其它的字段分开存储。
这里就写了一个工具类
代码语言：javascript复制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];
}
}
}使用
代码语言：javascript复制import {my_assign} from "@/utils/obj_util";
my_assign(this.form_data, data);
await this.$nextTick();
this.form.setFieldsValue(this.form_data);分页
模板
代码语言：javascript复制<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>JS
代码语言：javascript复制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”
这种问题一般都是后台返回的数据有问题
我这里直接这样处理,就算后端返回的数据有问题也不会报错了。
代码语言：javascript复制this.pagination.total = res.totalCount/1;错误2
Warning: [antdv: Each record in table should have a unique
keyprop,or setrowKeyto 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
代码语言：javascript复制<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>展示效果
