JSelectMultiUserAu.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <!-- 定义在这里的参数都是不可在外部覆盖的,防止出现问题 -->
  3. <j-select-biz-component
  4. :value="value"
  5. :listUrl="url.list"
  6. :columns="columns"
  7. v-on="$listeners"
  8. v-bind="attrs"
  9. />
  10. </template>
  11. <script>
  12. import JSelectBizComponent from './JSelectBizComponent'
  13. export default {
  14. name: 'JSelectMultiUser',
  15. components: { JSelectBizComponent },
  16. props: ['value'],
  17. data() {
  18. return {
  19. url: { list: '/sys/user/list' },
  20. columns: [
  21. { title: '姓名', align: 'center', width: '20%', widthRight: '70%', dataIndex: 'realname' },
  22. { title: '账号', align: 'center', width: '20%', dataIndex: 'username' },
  23. { title: '电话', align: 'center', width: '23%', dataIndex: 'phone' },
  24. { title: '出生日期', align: 'center', width: '23%', dataIndex: 'birthday' }
  25. ],
  26. // 定义在这里的参数都是可以在外部传递覆盖的,可以更灵活的定制化使用的组件
  27. default: {
  28. name: '用户',
  29. width: 1000,
  30. displayKey: 'realname',
  31. returnKeys: ['id', 'username'],
  32. queryParamText: '账号',
  33. }
  34. }
  35. },
  36. computed: {
  37. attrs() {
  38. return Object.assign(this.default, this.$attrs)
  39. }
  40. }
  41. }
  42. </script>
  43. <style lang="less" scoped></style>