欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件

 更新時(shí)間：2023年06月06日 11:44:12   作者：我是好人  
這篇文章主要為大家介紹了基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

使用效果

先看下默認(rèn)效果

支持按鈕超過一定數(shù)量自動(dòng)放到【更多】下拉按鈕里面

按鈕支持動(dòng)態(tài)控制是否禁用，是否顯示。

下面是一個(gè)代碼示例。

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: '狀態(tài)',
          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: `確認(rèn)刪除${record.username}嗎？`,
                });
              },
            },
          ],
        }),
      ],
    };
  },
});

介紹用法

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

原理就是通過一個(gè)函數(shù)，返回了一個(gè)帶customRender的列的配置。

參數(shù)介紹 函數(shù)聲明

export declare interface ActionButtonsConfig<T> extends Table.Column {
  limit: number;
  showDivider: boolean;
  buttons: Array<ActionButtonsColumnConfig<T>>;
}
參數(shù)類型描述
limitnumber設(shè)置一個(gè)數(shù)量，超過該數(shù)量，則展示【更多】下拉按鈕。默認(rèn) 0，表示按鈕將全部展示
showDividerboolean是否展示分隔符，默認(rèn)展示
buttonsButtonConfig[]要展示的按鈕數(shù)組,具體配置看下面介紹

ButtonConfig

參數(shù)類型描述
text?string 或 (record, index) => string設(shè)置按鈕文本，同時(shí)支持動(dòng)態(tài)設(shè)置，參數(shù)為當(dāng)前行的相關(guān)數(shù)據(jù)
icon?string設(shè)置按鈕圖標(biāo)
click(record, index) => void設(shè)置按鈕點(diǎn)擊事件，參數(shù)為當(dāng)前行的相關(guān)數(shù)據(jù)
disabled?(record, index) => boolean動(dòng)態(tài)設(shè)置按鈕是否禁用，參數(shù)為當(dāng)前行的相關(guān)數(shù)據(jù)
visible?(record, index) => boolean動(dòng)態(tài)設(shè)置按鈕是否顯示，參數(shù)為當(dāng)前行的相關(guān)數(shù)據(jù)

安裝

npm i action-buttons

使用

目前沒有寫任何樣式文件，想修改樣式的話，需要自行在項(xiàng)目處理。
按鈕的根節(jié)點(diǎn)設(shè)置了一個(gè) class="action-buttons"

直接在頁(yè)面引入

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

然后寫到 Table Columns 數(shù)組里面對(duì)應(yīng)位置即可。

雖然導(dǎo)出了組件ActionButtons，但還是推薦直接使用提供的useActionButtons方法直接去配置表格的操作列。

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

以上就是基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件的詳細(xì)內(nèi)容，更多關(guān)于ant-design-vue表格操作按鈕的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論