lg_frontend/pages/manager/user.vue

<template>
  <div>
    <Curd
     :columns="columns"
     :api-conf="apiConf"
     :form-items="formItems"
     @edit="editHandler"
    />
  </div>
</template>
<script>
import base from "~/templates/base";
import Curd from "../../components/smallCommon/Curd.vue";
export default {
  name: "user",
  extends: base,
  components: {
    Curd
  },
  data () {
    const self = this
    return {
      isEdit: false,
      roles: [],
      columns: [
        {
          dataIndex: 'username',
          key: 'username',
          title: '用户名'
        },

        {
          dataIndex: 'email',
          key: 'email',
          title: '邮箱'
        },
        {
          dataIndex: 'phone',
          key: 'phone',
          title: '电话'
        },
        {
          dataIndex: 'roleId',
          key: 'roleId',
          title: '角色',
          customRender (text) {
            const item = (self.roles || []).find(item => item.value === text)
            return item && item.label || ''
          }
        }
      ],
      apiConf: {
        listApi: { api: '/api/User/List', method: 'get' },
        deleteApi: { api: '/api/User/DeleteUser', method: 'post', paramsType: 'Object', deleteKey: 'userId' } ,
        editApi: { api:  '/api/User/UpdateUser', method: 'post', },
        addApi: { api:  '/api/User/Add', method: 'post' }
      }
    }
  },

  computed: {
    formItems () {
      const self = this
      return [
        {
          type: 'input',
          key: 'username',
          label: '用户名',
          isSearch: true,
          placeholder: '请输入用户名',
          rules: [
            { required: true, message: '请输入用户名' }
          ]
        },
        {
          type: 'input',
          key: 'password',
          label: '密码',
          placeholder: '请输入密码',
          hide: self.isEdit,
          rules: [
            { required: true, message: '请输入密码' }
          ]
        },
        {
          type: 'input',
          key: 'email',
          label: '邮箱',
          placeholder: '请输入邮箱',
        },
        {
          type: 'input',
          key: 'phone',
          label: '电话',
          placeholder: '请输入电话',
        },
        {
          type: 'select',
          key: 'roleId',
          label: '角色',
          placeholder: '请选择角色',
          children: self.roles,
          rules: [
            { required: true, message: '请选择角色' }
          ]
        }
      ]
    }
  },
  created() {
    this.getRoles()
  },

  methods: {
    editHandler (isEdit) {
      this.isEdit = isEdit
    },
    getRoles () {
      this.$get('/api/Role/all').then(({ data }) => {
        this.roles = data.map(item => ({
          label: item.roleName,
          value: item.id
        }))
      })
    }
  }
}
</script>
<style scoped lang="less">

</style>