简介

mb-list是常规列表模板，是mb-table、mb-search、工具栏的结合

使用示例

<mb-list ref="magicList" v-bind="listOptions" />

const listOptions = reactive({
  search: {
    noReset: 'id'
  },
  tools: [{
    type: 'add',
    permission: 'user:save',
    click: () => {
      formOptions.form.rows[0].cols[1].rules = [{ required: true, message: '请输入密码', trigger: 'change' }]
      formOptions.detail.formData = null
      formDialog.value.show()
    }
  },{
    type: 'delete',
    permission: 'user:delete',
    url: '/system/user/delete'
  }],
  table: {
    url: '/system/user/list',
    where: {
      username: {
        label: '登录名称',
      },
      name: {
        label: '姓名/昵称',
      },
      roleId: {
        type: 'select',
        label: '角色',
        props: {
          url: '/system/role/all',
          multiple: true
        }
      }
    },
    cols: [
      {
        field: 'username',
        label: '登录名称',
        sortable: 'custom'
      }, {
        field: 'name',
        label: '姓名/昵称',
        sortable: 'custom'
      }, {
        field: 'officeName',
        label: '所属机构'
      }, {
        field: 'roles',
        label: '角色'
      }, {
        field: 'phone',
        label: '手机号',
        sortable: 'custom'
      }, {
        field: 'isLogin',
        label: '禁止登录',
        type: 'switch',
        width: 100,
        change: (row) => {
          proxy.$get('/system/user/change/login/status', {
            id: row.id,
            isLogin: row.isLogin
          })
        }
      }, {
        field: 'createDate',
        label: '创建时间',
        width: 180
      }, {
        label: '操作',
        type: 'btns',
        width: 140,
        fixed: 'right',
        btns: [
          {
            permission: 'user:save',
            label: '修改',
            type: 'text',
            icon: 'ElIconEdit',
            click: (row) => {
              // magicForm.value.getDetail(row.id)
              formOptions.form.rows[0].cols[1].rules = []
              formOptions.detail.formData = proxy.$common.copyNew(row)
              formDialog.value.show()
            }
          }, {
            permission: 'user:delete',
            label: '删除',
            type: 'text',
            icon: 'ElIconDelete',
            click: (row) => {
              proxy.$common.handleDelete({
                url: '/system/user/delete',
                id: row.id,
                done: () => magicList.value.reload()
              })
            }
          }
        ]
      }
    ]
  }
})

list 属性

属性	说明	类型	可选值	默认值	示例/备注
search	mb-search组件的属性，详情	Object	—	—	—
table	mb-table组件的属性，详情	Object	—	—	—
tools	工具栏配置	Object	—	—	具体属性见下表
属性 说明 类型 可选值 默认值 示例/备注 type 类型，如果不配置就是el-button String add / delete — 类型介绍看下表 type: 'add' 添加按钮 String — — — type: 'delete' 多选删除按钮，注意mb-table要配置selection=true String — — — 不指定type 为自定义button String — — 具体属性见下表 属性 说明 类型 可选值 默认值 示例/备注 permission 权限标识控制，存在此标识的即可显示 String — — permission: 'dict:delete' if if判断是否显示 return true显示 return false不显示 Function — — — icon 可以使用图标集合的所有图标，要加前缀：ElIcon String — — icon: 'ElIconApple' type 类型 String primary / success / warning / danger / info / text — — size 尺寸 String large / default / small — — class class String — — — permission 权限标识控制，存在此标识的即可显示 String — — permission: 'dict:delete' click 单击回调方法 Function — — click: (row) => { console.log(row.name) }