前端 table-selector 表格选择框配置说明

发布于 2022-04-29 14:19:54

表格选择框配置说明

crud.js

 {
        title: '单选本地',
        key: 'select1',
        sortable: true,
        search: {
          disabled: true
        },
        type: 'table-selector',
        dict: {
          url: '/api/system/user/',
          value: 'id', // 数据字典中value字段的属性名
          label: 'name', // 数据字典中label字段的属性名
          getData: (url, dict, { form, component }) => {
            return request({ url: url, params: { page: 1, limit: 1 } }).then(ret => {
              component._elProps.page = ret.data.page
              component._elProps.limit = ret.data.limit
              component._elProps.total = ret.data.total
              return ret.data.data
            })
          }
        },
        form: {
          component: {
            span: 12,
            props: { multiple: true },
            elProps: {
              pagination: true,
              columns: [
                {
                  field: "name",
                  title: "名称",
                },
                {
                  field: "username",
                  title: "账号",
                },
                {
                  field: "role",
                  title: "角色Id",
                },
                {
                  field: "dept",
                  title: "部门Id",
                },

              ]
            }
          }
        }
      }

配置说明

详细文档:
1.http://d2-crud-plus.docmirror.cn/d2-crud-plus/guide/dict.html
2.https://xuliangzhan_admin.gitee.io/vxe-table/#/grid/api
NameDescriptionTypeRequiredDefault
type字段所使用的组件Stringtruetable-selector
dict字典的配置Objecttrue{}
multiple是否多选Booleanfalsefalse
pagination是否分页Booleanfalsefalse
columns表格的列配置Arraytrue[]
field字段Stringtrue''
title字段名称Stringtrue''

_

events

NameDescriptionParams
radioChange表格行单选的点击事件row,rowIndex
form:{
  component:{
    on: {      //单选事件监听
              radioChange({ event, scope }) {
                scope.form.channel_number = event.row.channel_number
              }  
      },
  }
}
0 条评论

发布
问题