美文网首页
vue-antdesign子表格的全选与取消

vue-antdesign子表格的全选与取消

作者: 园Smile | 来源:发表于2020-11-13 14:44 被阅读0次

    废话不多说,直接上代码

     <a-table

              :columns="outColumns"

              :data-source="data"

              :expandedRowKeys="expandedRowKeys"

              :rowKey="data => data.tradeId"

              class="tdNowrap"

              :scroll="{ x: 'max-content' }"

              :row-selection="{ selectedRowKeys: selectedRowKeysFather, onChange: onChangeFather, onSelect: onSelectFather, onSelectAll: onSelectAllFather }"

              :pagination="false"

              @expand="handleExpand"

              bordered

            >

              <template

                slot="yieldType"

                slot-scope="text"

              >

                <span>{{text?(text==2 ? '行权' : '到期'):''}}</span>

              </template>

              <template

                v-if='roleshow("split")'

                slot="operation"

                slot-scope="text, record"

              >

                <a

                  v-if="record.splitResultVos.length>0"

                  class="operatSty"

                  @click='split(record)'

                >修改</a>

                <a

                  v-else

                  class="operatSty"

                  @click='split(record)'

                >分户</a>

              </template>

              <a-table

                slot="expandedRowRender"

                slot-scope="record"

                class="innerTable"

                v-if="record.splitResultVos.length&&record.splitResultVos.length"

                :columns="innerColumns"

                :data-source="record.splitResultVos"

                :rowKey="record => record.splitId"

                :pagination="false"

                :rowClassName="tableRowClass"

                :row-selection="{ selectedRowKeys: selectedRowKeysSon, onChange: onChangeSon, onSelect: onSelectSon, onSelectAll: onSelectAllSon }"

                bordered

              >

              </a-table>

            </a-table>

        // 复选框 子

        onChangeSon(selectedRowKeys, selectedRows) {

          this.selectedRowKeysSon = selectedRowKeys;

          const data = this.selectedSonData.concat(selectedRows);

          const newArr = [];

          const obj = {};

          selectedRowKeys.map(key => {

            data.map(item => {

              if (!obj[item.splitId] && key === item.splitId) {

                item.checked = true;

                newArr.push(item);

                obj[item.splitId] = 1

              }

            })

          })

          this.selectedSonData = newArr

          console.log("selectedRowKeys========", selectedRowKeys, 'newArr', newArr, 'selectedSonData', this.selectedSonData)

        },

    相关文章

      网友评论

          本文标题:vue-antdesign子表格的全选与取消

          本文链接:https://www.haomeiwen.com/subject/nigvbktx.html