自学内容网 自学内容网

el-table多选,分页切换时,选中内容不变;清空多选的内容

el-table中添加:row-key=“getRowKeys”
设置true【 :reserve-selection=“true”】

:row-key="getRowKeys" 



 <el-table-column type="selection" :reserve-selection="true" width="55" align="center" fixed="left" />

<el-table ref="multipleTable" :row-key="getRowKeys" :data="tableData" role="table"
        height="100%" @selection-change="handleSelectionChange"
        :header-cell-style="{ background: '#1890ff', color: '#fff', fontSize: '14px', fontFamily: 'SourceHanSansSC-Medium', fontWeight: '500' }"
        size="small">

        <el-table-column type="selection" :reserve-selection="true" width="55" align="center" fixed="left" />

        <el-table-column type="expand" width="55" fixed="left"> 

          <template slot-scope="props">

            <el-form style="padding: 0 20px;" label-position="left" inline class="demo-table-expand">

              <el-form-item :style="'width:380px'" v-for="(i, j) in columns" :label="i.label + ':'" :key="j">

                <span>{{ props.row[i.prop] }}</span>

              </el-form-item>

            </el-form>

          </template>

        </el-table-column>

        <el-table-column type="index" :index="indexMethod" width="55" align="center" label="序号" />

        <template v-for="(item, index) in columns">

          <el-table-column v-if="queryParams.layout && item.abstract" :key="index" show-overflow-tooltip
            :label="item.label" align="center" :width="item.width">

            <template slot-scope="scope">

              <span>{{ scope.row[item.prop] }}</span>

            </template>

          </el-table-column>

          <el-table-column v-if="!queryParams.layout" :key="index" show-overflow-tooltip :label="item.label"
            align="center" :width="item.width">

            <template slot-scope="scope">

              <span>{{ scope.row[item.prop] }}</span>

            </template>

          </el-table-column>

        </template>

      </el-table>
 getRowKeys(row) {
      return row.id
    },

清空多选

 this.$refs.multipleTable.clearSelection()

原文地址:https://blog.csdn.net/Aa12364567/article/details/142346124

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!