ListConfig

参考

const listConfig = computed(() => {
  return [
    {
      key: "key",
      head: "key",
      width: 50,
      type: "select",
      fixed: "left",
      multiple: true,
    },
    {
      key: "image",
      head: "头像",
      width: 80,
      type: "image",
      model: "image",
      radius: true,
    },
    {
      key: "name",
      head: "名称",
      width: 100,
      type: "text",
      model: "name",
      orderModel: "name",
    },
    {
      key: "role",
      head: "角色",
      width: 100,
      type: "enum",
      model: "role",
      orderModel: 'role',
      dictList: roleOptions,
    },
    {
      key: "region",
      head: "归属地区",
      width: 120,
      type: "enum",
      model: "region",
      isTree: true,
      dictKey: "value",
      dictLabel: "label",
      orderModel: 'region',
      dictList: regionOptions,
    },
    {
      key: "status",
      head: "在线状态",
      width: 120,
      type: "status",
      model: "status",
      orderModel: 'status',
      dictList: statusOptions,
      color: (row) => {
        if ([1, 2, 3, 4].includes(row.status)) {
          return ["#1f9d68", "#d93f34", "#c97700", "#2a6af5"][row.status - 1];
        }
      },
    },
    {
      key: "tags",
      head: "标签",
      width: 160,
      type: "tags",
      model: (row) => {
        if (!row?.tags || !row?.tags.length) return [];
        return row.tags.map((item) => {
          return tagList.find((tag) => tag.dictKey == item)?.dictLabel ?? item;
        });
      },
    },
    {
      key: "switch",
      width: 120,
      head: "启用状态",
      type: "switch",
      model: "switch",
      orderModel: 'switch',
      changeFun: (val, scope) => {
        scope.row.switch = val;
      },
    },
    {
      key: "createTime",
      head: "创建时间",
      width: 160,
      type: "text",
      model: "createTime",
      orderModel: "createTime",
    },
    {
      key: "option",
      head: "操作",
      type: "option",
      fixed: "right",
      width: 160,
      optionConfig: [
        {
          label: "查看",
          icon: "View",
          clickFun: async ({ row }) => {},
        },
        {
          label: "编辑",
          icon: "Edit",
          clickFun: ({ row }) => {},
        },
        {
          label: "执行",
          icon: "SwitchButton",
          clickFun: ({ row }) => {
          },
        },
        {
          label: "删除",
          icon: "DeleteFilled",
          clickFun: ({ row }) => {
          },
        },
      ],
    },
  ];
});

通用属性说明

属性	说明	类型	默认值
key	list唯一key	string	-
width	列宽	number	-
head	表头	string	-
type	列类型，不同的类型有不同的属性	string	-
fixed	固定列在左边或者右边	string	-
model	对应列表行数据的属性名	Function/string	-
orderModel	对应列的排序字段	Function/string	-

text属性说明

属性	说明	类型	默认值
color	字体颜色	Function/string	-
clickFun	点击回调函数	Function	-
isNumFormat	是否使用数字格式	boolean	false
customIcon	自定义图标	Function/string	-

tags属性说明

无

switch属性说明

属性	说明	类型	默认值
active	激活属性值	string/number/boolean	-
inactive	非激活属性值	string/number/boolean	-
disabled	是否禁用	Function/boolean	false
size	尺寸	string	-
changeFun	值改变时回调函数	Function	-

status属性说明

属性	说明	类型	默认值
color	字体颜色	Function/string	-
dictList	数据字段列表	Function/array	-
dictKey	指定选项的值为选项对象的某个属性值	string	dictKey
dictLabel	指定节点标签为节点对象的某个属性值	string	dictLabel
isTree	数据是否是树结构	boolean	false

select属性说明

属性	说明	类型	默认值
multiple	是否多选	boolean	-
selectable	是否可以选中	Function	-
chickFun	点击回调	Function	-
allSelectable	是否可全选	Function	-

price属性说明

属性	说明	类型	默认值
color	字体颜色	Function/string	-
unit	单位	Function	-
currency	币种属性	Function/string	-
clickFun	点击回调函数	Function	-

option属性说明

属性	说明	类型	默认值
optionConfig	操作按钮列表，按钮配置可以参考action	array	-

image属性说明

属性	说明	类型	默认值
radius	是否是圆形图片	boolean	false

expand属性说明

属性	说明	类型	默认值
component	展开行的组件，可以是一个vue组件	object	-

enum属性说明

属性	说明	类型	默认值
color	字体颜色	Function/string	-
dictList	数据字段列表	Function/array	-
dictKey	指定选项的值为选项对象的某个属性值	string	dictKey
dictLabel	指定节点标签为节点对象的某个属性值	string	dictLabel
isTree	数据是否是树结构	boolean	false
clickFun	点击回调函数	Function	-

edit属性说明

属性	说明	类型	默认值
editModel	用于判断是否是编辑模式的字段	Function/string	isEdit
editOption	编辑模式下的配置，Form支持的类型，同步支持	object	-
readOption	展示模式下的配置，可以是上面任意一种类型	object	-