亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

antd?table長表格出現(xiàn)滾動(dòng)條的操作方法

 更新時(shí)間：2022年06月17日 09:41:49   作者：一晌貪歡i  
這篇文章主要介紹了antd?table長表格如何出現(xiàn)滾動(dòng)條,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

如圖想實(shí)現(xiàn)如上圖所示，看antd table官方文檔想實(shí)現(xiàn)這個(gè)，介紹的很不詳細(xì)，實(shí)現(xiàn)起來一堆坑。
阿里云頁面的這種表格，拉伸起來也有很多bug，也不知道他的實(shí)現(xiàn)方法如何，我這邊介紹一種方法實(shí)現(xiàn)如下，遇到拉伸也不怕…

    <div class="content">
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :row-key="record => record.id"
        :pagination="pagination"
        :scroll="{ x: '1400px' | true }"
        class="charge-table"
        @change="handleTableChange"
      >
        <div slot="trialQuota" slot-scope="text">{{ text }}小時(shí)</div>
        <template slot="action" slot-scope="text, record">
          <a-button type="link" style="margin-left: -8px" @click="openDetail(text, record)"> 詳情 </a-button>
          <a-button type="link" @click="openCharge(text)"> 充賬 </a-button>
          <a-button type="link" :disabled="text.tryData" @click="onTry(text)"> 試用 </a-button>
        </template>
      </a-table>
    </div>
  .content {
    flex: 1;
    background: #ffffff;
    border-radius: 8px;
    padding: 0 20px;
    position: relative;
  }
   /deep/.ant-spin-nested-loading {
    position: absolute;
    left: 20px;
    right: 20px;
  }

重點(diǎn)在于css設(shè)置絕對定位，columns每一項(xiàng)都要設(shè)置width，且width必須為固定px，不能是百分比（%），不然拉伸會(huì)被隱藏，至于單元格里面是否折行無所謂，剛開始就是在這里踩了很多坑

const columns = [
  {
    title: '編號',
    dataIndex: 'id',
    // width: '3.4%',
    width: '58px'
  },
  {
    title: '用戶平臺(tái)名',
    dataIndex: 'ourUserName',
    // width: '6.9%',
    width: '173px'
  },
  {
    title: '用戶外部名',
    dataIndex: 'userName',
    // scopedSlots: { customRender: 'userName' },
    //  width: '166px'
    // width: '6.9%',
    width: '145px',
    ellipsis: true
  },
  {
    title: '用戶組',
    dataIndex: 'groupDesc',
    // scopedSlots: { customRender: 'groupDesc' },
    // width: '10%',
    ellipsis: true,
    width: '198px'
  },
  {
    title: '用戶組賬戶',
    dataIndex: 'groupName',
    // width: '8.4%',
    width: '145px'
  },
  {
    title: '余額(單位：核時(shí))',
    dataIndex: 'corestimeBalance',
    // width: '7.9%',
    width: '129px'
  },
  {
    title: 'VPN地址',
    dataIndex: 'vpnAddress',
    scopedSlots: { customRender: 'vpnAddress' },
    // width: '13.2%',
    width: '217px'
    // ellipsis: true,
    // width: '246px'
    // customCell: () => {
    //   return {
    //     style: {
    //        'min-width': '300px',
    //       'white-space': 'nowrap',
    //       'text-overflow': 'ellipsis'
    //     }
    //   }
    // }

    //    customCell: () => {
    //   return {
    //     style: {
    //         'color':'yellow',
    //       'width': '246px'
    //     }
    //   }
    // },
    //    customHeaderCell: () => {
    //   return {
    //     style: {
    //         'color':'yellow',
    //       'width': '246px'
    //     }
    //   }
    // }
  },
  {
    title: 'SSH地址',
    dataIndex: 'sshAddress',
    ellipsis: true,
    // width: '13.2%',
    width: '245px'
  },
  {
    title: '試用方式',
    dataIndex: 'trialMethod',
    ellipsis: true,
    // width: '7.8%',
    width: '128px'
  },
  {
    title: '試用額度',
    dataIndex: 'trialQuota',
    // width: '6.9%',
    width: '104px',
    scopedSlots: { customRender: 'trialQuota' }
  },
  {
    title: '集群操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    width: '132px'
  }
]

實(shí)現(xiàn)出來的效果如下：

在這里插入圖片描述

到此這篇關(guān)于antd table長表格出現(xiàn)滾動(dòng)條的操作方法的文章就介紹到這了,更多相關(guān)antd table長表格滾動(dòng)條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論