vue typescript curd

用typescript 完成了一个页面

import { Component, Prop } from 'vue-property-decorator';
import Vue, { VNode } from 'vue';
import { Form } from 'ant-design-vue';
import api from '@/api/post_category';

@Component({
    name: 'PostCategory',
    components: {
    },
})
class PostCategory extends Vue {
  @Prop() public form: any;
  private loading = false;
  private dataSource = []
  private columns = [
    { title: '名称', dataIndex: 'name' },
    { title: '路径', dataIndex: 'code' }
  ];
  private options = [];
  private selectedRows = []


  public mounted() {
    this.loadData()
  }

  public loadData() {
    api.list()
      .then(res => {
        this.dataSource =  Object.assign([], res)
        this.options = Object.assign([], res)
      }).catch(err => {
        this.$notification.error({message: err.message});
      })
  }

  public displayRender(item: any) {
    return item.labels[item.labels.length - 1];
  }

  private handleSave() {
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        const param = Object.assign({}, values)
        if (Array.isArray(values.parentUid)) {
          param.parentUid = values.parentUid[values.parentUid.length - 1]
        }
        api.addPostCategory(param)
          .then(() => {
            this.loadData()
            this.$notification.success({message: '保存成功'})
          }).catch((err) => {
            this.$notification.error({message: err.message});
          });
      }
    })
  }

  private handleModify() {
    if (this.selectedRows.length !== 1) {
      this.$notification.warn({message: '请选择一行数据进行修改'})
      return
    }
    this.form.setFieldsValue(Object.assign({}, this.selectedRows[0]))
  }

  private handleDelete() {
    if (this.selectedRows.length === 0) {
      this.$notification.warn({message: '请选择一行数据进行修改'})
      return
    }

    const self = this
    this.$confirm({
      title: '请确认你要删除这些项目',
      cancelText: '取消',
      okText: '确认',
      onOk() {
        const list = self.selectedRows.map(it => it.uid)
        api.delete(list)
          .then(() => {
            self.loadData()
            self.$notification.warn({message: '删除成功'})
          }).catch(err => this.$notification.error({message: err.message}))
      },
      onCancel() {},
    });
  }

  private handleAdd() {
    this.form.resetFields()
  }

  private onSelectChange(selectedRowKeys: any, selectedRows: any) {
    this.selectedRows = selectedRows
  }

  public render(): VNode {
    const fieldNames = { label: 'name', value: 'uid', children: 'children'}
    const scroll = { y: innerHeight - 200 };
    const { getFieldDecorator } = this.form;
    const rowSelection = {
      onChange: this.onSelectChange
    }
    return (
      
        
          
新增分类
          
            
              {getFieldDecorator('name', {rules: [{ required: true, message: '请输入账号' }], validateTrigger: 'blur'})(
                
              )}
            

            
              {getFieldDecorator('code')(
                
              )}
            

            
              {getFieldDecorator('parentUid')(
                
              )}
            

            
              {getFieldDecorator('description')(
                
              )}
            

            
              保存
            
          
        
        
          

            新增
            修改
            删除
          
          
        
      
    );
  }
}

export default Form.create({})(PostCategory);