zoukankan      html  css  js  c++  java
  • expandedRowKeys、expandedRowsChange、expand

    这里主要是记录用expandedRowKeys来控制展开关闭和展开参数设置

    页面效果

    标签参数(效果主要参数:@onExpand="onExpand" :expandedRowKeys="expandedRowKeys" slot="expandedRowRender")

    官方API:https://www.antdv.com/components/table-cn/#api

    <a-table
            ref="table"
            size="default"
            rowKey="orderWorkerId"
            :columns="columns"
            :multiple="false"
            :operator="operator"
            :params="queryParam"
            :api="api.hzlorderworker"
            @onExpand="onExpand"
            :expandedRowKeys="expandedRowKeys" >
        <a-table
              rowKey="orderWorkerId"
              slot="expandedRowRender"
              slot-scope="text,record"
              :columns="innerColumns"
              :dataSource="detailsData"
              :pagination="false"
              style="padding: 2px;border: none"
              size="middle"
              :bordered="false">
         </a-table>
     </a-table>

    vue

    export default {
    data () {
        return {
           ....,
            // 展开的行,控制属性 这里控制
          expandedRowKeys: [],
          detailsData: []
         }
    }
    methods: {
        onExpand (expanded, record) {
          if (expanded) {
            // 初始化展开值
            this.detailsData = []
            // 初始化关闭所有展开窗
            this.expandedRowKeys = []
            // 设置展开参数
            this.detailsData.push(record)
            // 设置展开窗Key
            this.onExpandedRowsChange(record)
          } else {
            this.expandedRowKeys = []
          }
        },
        onExpandedRowsChange (rows) {
          this.expandedRowKeys = [rows.orderWorkerId]
        }
      }
    }

    代码粗糙 大神们自己优化

  • 相关阅读:
    【重要】ASCII码表
    深入了解php opcode缓存原理
    php 请求参数限制
    【Demo】 生成二维码 和 条形码
    【Demo】HTML5 拍照上传
    jq cookie的使用
    vue.js中的v-for输出数组理解
    js无限轮播的写法
    HTML5视频的使用总结
    angular报错总计
  • 原文地址:https://www.cnblogs.com/it66/p/12176840.html
Copyright © 2011-2022 走看看