简介

可以用于接口列表数据展示，以及静态数据展示

基础用法

<mb-table ref="table" v-bind="tableOptions" />

const tableOptions = reactive({
  url: '/system/dict/list',
  page: true,
  where: {
    type: {
      type: 'input',
      label: '类型',
      value: ''
    },
    dictType: {
      type: 'select',
      label: '字典类型',
      value: '',
      props: {
        'all-option': true,
        type: 'dict_type'
      }
    }
  },
  cols: [
    {
      field: 'type',
      label: '类型'
    },
    {
      field: 'descRibe',
      label: '描述'
    },
    {
      field: 'dictType',
      label: '字典类型',
      width: 200,
      dictType: 'dict_type'
    },
    {
      field: 'createDate',
      label: '创建时间'
    },
    {
      field: 'remarks',
      label: '备注',
      width: 200
    },
    {
      label: '操作',
      type: 'btns',
      width: 220,
      fixed: 'right',
      btns: [
        {
          permission: 'dict:save',
          label: '修改',
          type: 'text',
          icon: 'ElIconEdit',
          click: (row) => {
            
          }
        },
        {
          permission: 'dict:delete',
          label: '删除',
          type: 'text',
          icon: 'ElIconDelete',
          click: (row) => {
            
          }
        }
      ]
    }
  ]
})

table 属性

属性	说明	类型	可选值	默认值	示例/备注
props	el-table原生属性配置：表格属性	Object	—	—	—
url	接口相对路径	String	—	—	—
limit	分页条数	Number	—	10	—
page	是否开启分页	Boolean	—	true	左右方向键可以翻页
done	数据加载完回调方法	Function	—	—	—
where	查询条件	Object	—	—	where: { type: { type: 'input', label: '类型', value: '' } }
showNo	是否显示序号	Boolean	—	true	—
selection	是否开启多选	Boolean	—	false	—
data	静态数据	Array	—	—	[{name:'吕金泽',age: 25}]
method	请求方法	String	get / post	post
cols	列集合	Array	—	—	{ field: 'name', label: '姓名' }, { field: 'age', label: '年龄' }
emptyText	数据为空所显示的文本	String	—	暂无数据	—

table-cols属性

属性	说明	类型	可选值	默认值	示例/备注
cols	可以嵌套无限个cols实现多表头	Object	—	—	—
props	el-table-column原生属性配置：表格列属性	Object	—	—	—
field	字段名	String	—	—	—
label	列标题	String	—	—	—
align	对齐方式	String	left / center / right	center	—
width	宽度	String	—	—	—
fixed	列是否固定在左侧或者右侧。 true 表示固定在左侧	String / Boolean	true / 'left' / 'right'	—	—
sortable	对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件	Boolean / String	true / false / 'custom'	false	—
if	if判断是否显示此列	Function	—	—	—
click	单击回调方法	Function	—	—	click: (row) => { console.log(row.name) }
templet	模板方法	Function	—	—	templet: (row) => { return row.name; } 此方法优先级大于dictType
dictType	字典类型，自动反显label	String	字典管理中的类型	—	dictType: 'sex' 此属性优先级大于type
type	类型	String	dynamic / switch / btns / image / html	默认是显示文本	—
type: 'dynamic'	动态设置组件	插槽	—	—	示例见下一行
<mb-table ref="magicTable" v-bind="tableOptions" > <template v-for="col in cols" #[col.field]="{ row, index }"> {{ row.name }} </template> </mb-table>
type: 'switch'	开关组件	默认是Number，数值是0（关）和1（开）	—	—	具体属性见下表
属性 说明 类型 可选值 默认值 示例/备注 activeValue switch 状态为 on 时的值 Number / String / Boolean — 1 — inactiveValue switch 状态为 on 时的值 Number / String / Boolean — 0 — if if判断是否显示 return true显示 return false不显示 Function — — —
type: 'btns'	按钮组	—	—	—	具体属性见下表
属性 说明 类型 可选值 默认值 示例/备注 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 small — class class String — — — click 单击回调方法 Function — — click: (row) => { console.log(row.name) }
type: 'image'	显示图片，可以是http地址，也可以是相对路径	String	—	—	—
type: 'html'	显示为html	String	—	—	—