antdesign-vue表格点击获取行数据

<div>
    <a-table
      rowKey="id"
      key="list"
      style="width: 100vw"
      :columns="columns"
      :data-source="tableData"
      :customRow="customRow" //选中绑定重点
      :pagination="false"
      :scroll="{ y: '72vh', x: 250 }"
    />
    <div class="returnbut">
      <van-button @click="$router.go(-1)">返回</van-button>
    </div>
  </div>

方法

data() {
    return {
     // 重点
     customRow: (record, index) => {
        return {
          on: {
            click: () => {
             console.log(record,index);// ok
              tableSelectRow(record.qisOpnChecklistHeadId,record.qisOpnChecklistDistributionId).then(res=>{
              
                if(res){
 
                this.$router.push({
                  name: "Implementation",
                  query: {...record},
                });
                }else{
                  
                  this.$router.push({
                  name: "InspectionFrequency",
                  query: {...record},
                });
                }
              })
            
              
            },
          },
        };
      },

      columns: [
        {
          dataIndex: "checklistName",
          key: "checklistName",
          id: "1",
          title: this.$t("table.ChecklistName"),
          width: 150,
          fixed: "left",
          scopedSlots: { customRender: "name" },
        },
        {
          title: this.$t("table.ManufacturingProcess"),
          dataIndex: "productionProcess",
          key: "productionProcess",
          fixed: "left",
          width: 100,
          id: "2",
        },
        {
          title: this.$t("table.base"),
          dataIndex: "site",
          key: "site",
          width: 150,
          id: "3",
        },
        {
          title: this.$t("table.FactoryArea"),
          key: "plant",
          dataIndex: "plant",
          width: 150,
          scopedSlots: { customRender: "tags" },
          id: "4",
        },
        {
          title: this.$t("table.StayWire"),
          key: "line",
          dataIndex: "line",
          width: 250,
          scopedSlots: { customRender: "line" },
          id: "5",
        },
        {
          title: this.$t("table.varieties"),
          key: "productBo",
          dataIndex: "productBo",
          width: 150,
          scopedSlots: { customRender: "productBo" },
          id: "6",
        },
        {
          title: this.$t("table.entryName"),
          key: "projectName",
          dataIndex: "projectName",
          width: 150,
          scopedSlots: { customRender: "projectName" },
          id: "7",
        },
      ],
      tableData: [],
    };
  },
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Ant Design Vue 中,如果你想实现大屏轮播效果(类似于无限滚动或无缝滚动)并且同时保持表格(Table)的固定表头功能,你可以使用 `vue-seamless-scroll` 这个插件来处理分页和滚动的平滑衔接。下面是简单的步骤: 1. 安装依赖:首先安装 `vue-seamless-scroll` 和可能的其他 UI 组件库如 `@antv/vue-g2` 或者 Ant Design Vue 的 Table 组件。 ```bash npm install vue-seamless-scroll @antv/vue-g2 --save // 如果使用 G2图表 npm install antd vue --save // 如果只用Ant Design Vue ``` 2. 引入组件:在你的项目中引入 `SeamlessScroll` 组件,并将它应用到需要无缝滚动的父容器上。 ```html <template> <div ref="seamlessContainer"> <ul :data-source="dataSource" seamless></ul> </div> </template> <script> import { Table } from 'antd'; import SeamlessScroll from 'vue-seamless-scroll'; export default { components: { Table, SeamlessScroll, }, // 其他代码... } </script> ``` 3. 数据源管理:你需要为 `data-source` 设置动态的数据,这可以是一个包含多个页面数据的数组,这样当用户滚动到底部时,会自动加载更多数据。 ```js data() { return { dataSource: [], // 初始数据 pageSize: 10, // 每页显示数量 currentPage: 1, // 当前页码 }; }, methods: { fetchMoreData() { // 假设你有一个 API 来获取更多数据,这里只是一个示例 this.$axios.get('api/data', { params: { page: this.currentPage + 1, size: this.pageSize, }, }).then(response => { this.dataSource.push(...response.data); // 将新数据添加到现有数据源 }); }, }, mounted() { this.initScroll(); }, destroyed() { this.scroll.destroy(); // 移除滚动监听 }, computed: { // 使用虚拟列表技术,只渲染当前可见的部分 virtualizedData() { const start = (this.scroll.yAxis.scrollTop / this.scroll.yAxis.clientHeight) * this.dataSource.length; const end = start + this.scroll.yAxis.clientHeight / this.scroll.yAxis.clientHeight; return this.dataSource.slice(Math.floor(start), Math.ceil(end)); }, }, mounted() { this.scroll = new SeamlessScroll(this.$refs.seamlessContainer, { containerHeight: this.$el.offsetHeight, // 自定义容器高度 itemHeight: this.getItemHeight(), // 根据实际元素计算高 onScroll: this.fetchMoreData, // 触发滚动事件时加载更多数据 }); }, beforeDestroy() { this.scroll.destroy(); }, // ...其他方法 } ``` 4. 根据需求调整样式:如果需要使表头始终保持在顶部,可以在 CSS 中设置 `table-fixed-header` 类,确保表头不会随滚动而移动。 以上就是一个基本的大屏轮播并保持固定表头的 Vue 实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值