乐趣区

关于ant-design-vue:分享一个基于antdesignvue1的表格操作按钮组件

jiezi

应用成果

先看下默认成果

反对按钮超过肯定数量主动放到【更多】下拉按钮外面

按钮反对动态控制是否禁用，是否显示。

上面是一个代码示例。

export default Vue.extend({data() {
    return {
      dataSource: [{ id: 1, username: '张三', disabled: 1},
        {id: 2, username: '李四', disabled: 0},
        {id: 3, username: '王二麻子', disabled: 0},
      ] as MyData[],
      columns: [
        //
        {title: '#', dataIndex: 'id'},
        {title: '姓名', dataIndex: 'username'},
        {
          title: '状态',
          dataIndex: 'disabled',
          customRender: (value: number) => {
            return value === 0 ? (<a-tag color="green"> 启用 </a-tag>) : (<a-tag> 禁用 </a-tag>);
          },
        },
        useActionButtons<MyData>({
          align: 'center',
          title: '操作',
          limit: 0,
          showDivider: false,
          buttons: [{ icon: 'search', text: '查看'},
            {icon: 'edit', text: '编辑'},
            {
              text: '禁用',
              visible: (record) => record.disabled === 0,
            },
            {
              text: '启用',
              visible: (record) => record.disabled === 1,
            },
            {
              icon: 'message',
              text(record, index) {return ` 未读音讯（${record.id.toString()}）`;
              },
            },
            {
              icon: 'delete',
              text: '删除',
              disabled: (record) => record.disabled === 0,
              click: (record, index) => {
                this.$confirm({content: ` 确认删除 ${record.username}吗？`,
                });
              },
            },
          ],
        }),
      ],
    };
  },
});

介绍用法

type useActionButtons = (config: ActionButtonsConfig) => Table.Column;

原理就是通过一个函数，返回了一个带 customRender 的列的配置。

参数介绍

函数申明

export declare interface ActionButtonsConfig<T> extends Table.Column {
  limit: number;
  showDivider: boolean;
  buttons: Array<ActionButtonsColumnConfig<T>>;
}
参数 类型 形容
limit number 设置一个数量，超过该数量，则展现【更多】下拉按钮。默认 0，示意按钮将全副展现
showDivider boolean 是否展现分隔符，默认展现
buttons ButtonConfig[] 要展现的按钮数组, 具体配置看上面介绍

ButtonConfig

参数 类型 形容
text? string 或 (record, index) => string 设置按钮文本，同时反对动静设置，参数为以后行的相干数据
icon? string 设置按钮图标
click (record, index) => void 设置按钮点击事件，参数为以后行的相干数据
disabled? (record, index) => boolean 动静设置按钮是否禁用，参数为以后行的相干数据
visible? (record, index) => boolean 动静设置按钮是否显示，参数为以后行的相干数据

装置

npm i action-buttons

应用

目前没有写任何款式文件，想批改款式的话，须要自行在我的项目解决。
按钮的根节点设置了一个 class=”action-buttons”

间接在页面引入

import {useActionButtons, ActionButtons} from 'action-buttons';

而后写到 Table Columns 数组外面对应地位即可。

尽管导出了组件 ActionButtons，但还是举荐间接应用提供的useActionButtons 办法间接去配置表格的操作列。

源码

https://github.com/Tickly/action-buttons

欢送交换

退出移动版