ant-design-vue 项目代码

本页面所用数据源dataSource.js

export default [
  {
    id: 1,
    name: '张三',
    age: 3,
    gender: '男',
    address: '芜湖市~',
    birthday: '2000-01-01'
  },
  {
    id: 2,
    name: '李四',
    age: 5,
    gender: '女',
    address: '芜湖市~',
    birthday: '2000-01-01',
  },
]

列表页面

仅展示表格

姓名	年龄	性别	出生日期	住址
张三	3	男	2000年01月01日	芜湖市~
李四	5	女	2000年01月01日	芜湖市~

• 1

<script>
import dataSource from '../dataSource'
import moment from 'moment'


const columns = [
  { dataIndex: 'name', title: '姓名' },
  { dataIndex: 'age', title: '年龄' },
  { dataIndex: 'gender', title: '性别' },
  {
    dataIndex: 'birthday',
    title: '出生日期',
    customRender: v => moment(v).format('YYYY年MM月DD日')
  },
  { dataIndex: 'address', title: '住址' },
]

export default {
  render () {
    return <a-table rowKey="id" dataSource={dataSource} columns={columns} />
  }
}
</script>

查看页面

姓名	张三	年龄	3	性别	男
出生日期	2000-01-01	住址	芜湖市~

<script>
import dataSource from '../dataSource'
const user = dataSource[0]

export default {
  render () {
    return <a-descriptions bordered>
      <a-descriptions-item label="姓名">{user.name}</a-descriptions-item>
      <a-descriptions-item label="年龄">{user.age}</a-descriptions-item>
      <a-descriptions-item label="性别">{user.gender}</a-descriptions-item>
      <a-descriptions-item label="出生日期">{user.birthday}</a-descriptions-item>
      <a-descriptions-item label="住址">{user.address}</a-descriptions-item>
    </a-descriptions>
  }
}
</script>

编辑页面

修改值来触发验证效果试试

姓名

年龄

性别

男

住址

芜湖市~

<template>
  <a-form-model :model="user" :rules="rules">
    <erp-grid columns="3">
      <a-form-model-item prop="name" label="姓名">
        <a-input v-model="user.name" />
      </a-form-model-item>
      <a-form-model-item prop="age" label="年龄">
        <a-input-number v-model="user.age" />
      </a-form-model-item>
      <a-form-model-item prop="gender" label="性别">
        <a-select allowClear v-model="user.gender" :options="options" />
      </a-form-model-item>
      <erp-grid-item colSpan="3">
        <a-form-model-item prop="address" label="住址">
          <a-textarea v-model="user.address" />
        </a-form-model-item>
      </erp-grid-item>
      <a-form-model-item>
        <a-button type="primary">保存</a-button>
      </a-form-model-item>
    </erp-grid>
  </a-form-model>
</template>
<script>
import dataSource from '../dataSource'

const user = dataSource[0]

export default {
  data () {
    return {
      user,
      rules: {
        name: {
          required: true,
          message: '请输入姓名',
        },
        age: [
          {
            required: true,
            message: '请输入年龄',
          },
          {
            type: 'number',
            min: 0,
            message: '年龄不能小于0',
          }
        ],
        gender: {
          required: true,
          message: '请输入性别',
        },
      },
      options: [
        { label: '男', value: '男' },
        { label: '女', value: '女' },
      ]
    }
  },
}
</script>