diff --git a/backend/dvadmin/system/views/user.py b/backend/dvadmin/system/views/user.py
index ef9f40b..4ef20fd 100644
--- a/backend/dvadmin/system/views/user.py
+++ b/backend/dvadmin/system/views/user.py
@@ -1,12 +1,14 @@
 import hashlib
 
 from django.contrib.auth.hashers import make_password
+from django_restql.fields import DynamicSerializerMethodField
 from rest_framework import serializers
 from rest_framework.decorators import action
 from rest_framework.permissions import IsAuthenticated
 
 from application import dispatch
 from dvadmin.system.models import Users
+from dvadmin.system.views.role import RoleSerializer
 from dvadmin.utils.json_response import ErrorResponse, DetailResponse
 from dvadmin.utils.serializers import CustomModelSerializer
 from dvadmin.utils.validator import CustomUniqueValidator
@@ -17,6 +19,8 @@ class UserSerializer(CustomModelSerializer):
     """
     用户管理-序列化器
     """
+    dept_name = serializers.CharField(source='dept.name',read_only=True)
+    role_info = DynamicSerializerMethodField()
 
     class Meta:
         model = Users
@@ -26,6 +30,19 @@ class UserSerializer(CustomModelSerializer):
             "post": {"required": False},
         }
 
+    def get_role_info(self, instance,parsed_query):
+        roles = instance.role.all()
+
+        # You can do what ever you want in here
+
+        # `parsed_query` param is passed to BookSerializer to allow further querying
+        serializer = RoleSerializer(
+            roles,
+            many=True,
+            parsed_query=parsed_query
+        )
+        return serializer.data
+
 
 class UsersInitSerializer(CustomModelSerializer):
     """
diff --git a/web/src/components/foreign-key/README.md b/web/src/components/foreign-key/README.md
new file mode 100644
index 0000000..4f7c5c1
--- /dev/null
+++ b/web/src/components/foreign-key/README.md
@@ -0,0 +1,28 @@
+# 一对多表格显示配置说明
+本组件用于多对多返回数据使用,例如:角色信息
+```angular2html
+dept_name = "dvadmin团队"
+
+#crud的配置
+component: {
+name: 'foreignKey',
+valueBinding: 'dept_name'
+}
+```
+## crud.js
+```
+ {
+        component: {
+          name: 'foreignKey',
+          valueBinding: 'dept_name',
+        }
+ }
+```
+
+## 配置说明
+
+
+| Name       | Description      | Type    | Required | Default        |
+| ---------- | ---------------- | ------- | -------- | -------------- |
+| name       | 字段所使用的组件 | String  | true     | foreignKey |
+| valueBinding       | row中的key       | String  | true     | -             |
diff --git a/web/src/components/foreign-key/index.js b/web/src/components/foreign-key/index.js
new file mode 100644
index 0000000..6190ec2
--- /dev/null
+++ b/web/src/components/foreign-key/index.js
@@ -0,0 +1,15 @@
+import { d2CrudPlus } from 'd2-crud-plus'
+import group from './group'
+
+function install (Vue, options) {
+  Vue.component('foreign-key', () => import('./index'))
+  if (d2CrudPlus != null) {
+    // 注册字段类型`demo-extend`
+    d2CrudPlus.util.columnResolve.addTypes(group)
+  }
+}
+
+// 导出install， 通过`vue.use(D2pDemoExtend)`安装后 ，`demo-extend` 就可以在`crud.js`中使用了
+export default {
+  install
+}
diff --git a/web/src/components/foreign-key/index.vue b/web/src/components/foreign-key/index.vue
new file mode 100644
index 0000000..720eaa5
--- /dev/null
+++ b/web/src/components/foreign-key/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-tag :type="color">{{ currentValue }}</el-tag>
+</template>
+<script>
+// 行展示组件进阶版
+// 本示例演示要对传入的值做一些改变，然后再展示
+export default {
+  name: 'foreign-key',
+  props: {
+    color: {
+      require: false
+    }
+  },
+  data () {
+    return {
+      currentValue: ''
+    }
+  },
+  created () {
+    const { row } = this.$parent.scope
+    const valueBinding = this.$parent.valueBinding
+    this.setValue(row[valueBinding])
+  },
+  methods: {
+    setValue (value) {
+      // 在这里对 传入的value值做处理
+      this.currentValue = value
+    }
+  }
+}
+</script>
diff --git a/web/src/components/index.js b/web/src/components/index.js
index 73ffe1f..943e6c8 100644
--- a/web/src/components/index.js
+++ b/web/src/components/index.js
@@ -7,3 +7,5 @@ Vue.component('d2-container', d2Container)
 Vue.component('d2-icon', () => import('./d2-icon'))
 Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
 Vue.component('importExcel', () => import('./importExcel/index.vue'))
+Vue.component('foreignKey', () => import('./foreign-key/index.vue'))
+Vue.component('manyToMany', () => import('./many-to-many/index.vue'))
diff --git a/web/src/components/many-to-many/README.md b/web/src/components/many-to-many/README.md
new file mode 100644
index 0000000..516302e
--- /dev/null
+++ b/web/src/components/many-to-many/README.md
@@ -0,0 +1,34 @@
+# 多对多表格显示配置说明
+本组件用于多对多返回数据使用,例如:角色信息
+```angular2html
+role_info = [
+    {"id":1,"name":"普通用户"},
+    {"id":2,"name":"管理员"}
+]
+
+#crud的配置
+component: {
+name: 'manyToMany',
+valueBinding: 'role_info',
+children: 'name'
+}
+```
+## crud.js
+```
+ {
+        component: {
+          name: 'manyToMany',
+          valueBinding: 'role_name',
+          children: 'name'
+        }
+ }
+```
+
+## 配置说明
+
+
+| Name       | Description      | Type    | Required | Default        |
+| ---------- | ---------------- | ------- | -------- | -------------- |
+| name       | 字段所使用的组件 | String  | true     | manyToMany |
+| valueBinding       | row中的key       | String  | true     | -             |
+| children   | 数组中的key         | String | true    | name          |
diff --git a/web/src/components/many-to-many/index.js b/web/src/components/many-to-many/index.js
new file mode 100644
index 0000000..e8ba588
--- /dev/null
+++ b/web/src/components/many-to-many/index.js
@@ -0,0 +1,15 @@
+import { d2CrudPlus } from 'd2-crud-plus'
+import group from './group'
+
+function install (Vue, options) {
+  Vue.component('many-to-many', () => import('./index'))
+  if (d2CrudPlus != null) {
+    // 注册字段类型`demo-extend`
+    d2CrudPlus.util.columnResolve.addTypes(group)
+  }
+}
+
+// 导出install， 通过`vue.use(D2pDemoExtend)`安装后 ，`demo-extend` 就可以在`crud.js`中使用了
+export default {
+  install
+}
diff --git a/web/src/components/many-to-many/index.vue b/web/src/components/many-to-many/index.vue
new file mode 100644
index 0000000..c6bd225
--- /dev/null
+++ b/web/src/components/many-to-many/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <el-tag style="margin-right: 10px" :type="color" v-for="(item,index) in currentValue" :key="index">{{ item[key] }}</el-tag>
+  </div>
+</template>
+<script>
+// 行展示组件进阶版
+// 本示例演示要对传入的值做一些改变，然后再展示
+export default {
+  name: 'many-to-many',
+  props: {
+    color: {
+      require: false
+    }
+  },
+  data () {
+    return {
+      currentValue: [],
+      key: 'name'
+    }
+  },
+  created () {
+    const { row } = this.$parent.scope
+    const { children } = this.$parent
+    if (children) {
+      const valueBinding = this.$parent.valueBinding
+      this.setValue(row[valueBinding])
+      this.key = children
+    } else {
+      this.setValue([])
+    }
+  },
+  methods: {
+    setValue (value) {
+      // 在这里对 传入的value值做处理
+      this.currentValue = value
+    }
+  }
+}
+</script>
diff --git a/web/src/libs/util.js b/web/src/libs/util.js
index 0b00d8b..9d0abd1 100644
--- a/web/src/libs/util.js
+++ b/web/src/libs/util.js
@@ -2,11 +2,13 @@ import cookies from './util.cookies'
 import db from './util.db'
 import log from './util.log'
 import dayjs from 'dayjs'
+import filterParams from './util.params'
 
 const util = {
   cookies,
   db,
-  log
+  log,
+  filterParams
 }
 
 /**
diff --git a/web/src/libs/util.params.js b/web/src/libs/util.params.js
new file mode 100644
index 0000000..72632a6
--- /dev/null
+++ b/web/src/libs/util.params.js
@@ -0,0 +1,15 @@
+/**
+ * 对请求参数进行过滤
+ * that=>this
+ * array:其他字段数组
+ */
+const filterParams = function (that, array) {
+  const arr = that.crud.columns
+  const columnKeys = arr.map(item => {
+    return item.key
+  })
+  const newArray = [...columnKeys, array, 'id']
+  return '{' + newArray.toString() + '}'
+}
+
+export default filterParams
diff --git a/web/src/views/system/user/crud.js b/web/src/views/system/user/crud.js
index 9838106..19c7167 100644
--- a/web/src/views/system/user/crud.js
+++ b/web/src/views/system/user/crud.js
@@ -128,6 +128,7 @@ export const crudOptions = (vm) => {
             placeholder: '请输入密码'
           },
           value: vm.systemConfig('base.default_password'),
+          editDisabled: true,
           itemProps: {
             class: { yxtInput: true }
           }
@@ -193,6 +194,10 @@ export const crudOptions = (vm) => {
             pagination: true,
             props: { multiple: false }
           }
+        },
+        component: {
+          name: 'foreignKey',
+          valueBinding: 'dept_name'
         }
       },
       {
@@ -368,6 +373,11 @@ export const crudOptions = (vm) => {
               ]
             }
           }
+        },
+        component: {
+          name: 'manyToMany',
+          valueBinding: 'role_info',
+          children: 'name'
         }
       }
     ].concat(vm.commonEndColumns({
diff --git a/web/src/views/system/user/index.vue b/web/src/views/system/user/index.vue
index 6be1535..ce9e5b7 100644
--- a/web/src/views/system/user/index.vue
+++ b/web/src/views/system/user/index.vue
@@ -81,7 +81,7 @@
 import * as api from './api'
 import { crudOptions } from './crud'
 import { d2CrudPlus } from 'd2-crud-plus'
-
+import util from '@/libs/util'
 export default {
   name: 'user',
   mixins: [d2CrudPlus.crud],
@@ -133,7 +133,9 @@ export default {
       return crudOptions(this)
     },
     pageRequest (query) {
-      return api.GetList(query)
+      const columnKeys = util.filterParams(this,['dept_name','role_info{name}'])
+      const params = { query: columnKeys,...query }
+      return api.GetList(params)
     },
     addRequest (row) {
       return api.AddObj(row)