element-UI+Vue:el-table的selection已经选择的数据,翻页不清空 + 清除table选择数据

news/2024/7/10 2:10:58 标签: vue, elementui

先说实现翻页不清空

1、先在表格第一列类型type="selection"的el-table-column加入:reserve-selection="true"
2、在el-table 标签加上:row-key="getRowKeys"
3、在methods加上getRowKeys方法

// 指定一个唯一标识。id或者其他唯一的
getRowKeys (row) {
    return row.material;
},

最终代码

<el-table height="445px" :cell-style="{padding:'5px'}" :data="materialArr.slice((currentPage-1)*pagesize,currentPage*pagesize)" ref="materialTable" :border="true" :row-key="getRowKeys">
	<el-table-column type="selection" width="50" align="center" :reserve-selection="true"></el-table-column>
	<el-table-column type="index" :index="indexMethod" label="序号" width="60px"></el-table-column>
	<el-table-column property="material" label="物品编号" width="170px"></el-table-column>
	<el-table-column property="materialDesc" label="名称" width="200px" :show-overflow-tooltip="true"></el-table-column>    
	<el-table-column property="materialSpec" label="规格型号" width="150px"></el-table-column>
	<el-table-column property="unitDesc" label="单位" width="70px"></el-table-column>
	<el-table-column property="materialTypeDesc" label="物品类型" width="90px"></el-table-column>
	<el-table-column property="salePrice" label="销售单价" width="90px"></el-table-column>
	<el-table-column property="materialBrand" label="品牌" :show-overflow-tooltip="true"></el-table-column>
	<el-table-column property="materialFactory" label="制造厂家" :show-overflow-tooltip="true"></el-table-column>
</el-table>
methods: {
  // 指定一个唯一标识。id或者其他唯一的
  getRowKeys (row) {
      return row.material;
  },
}

实现这个之后发现提交操作之后不会清空原本el-table的selection选择

1、在el-table 标签加上ref="materialTable"
2、在你需要清空的时候加上以下代码

this.$refs.materialTable.clearSelection();

http://www.niftyadmin.cn/n/1691450.html

相关文章

如果list中的对像的编号相同就把对像合并,并将数量相加

https://blog.csdn.net/winter_chen001/article/details/72648512 以下个人使用&#xff0c;感觉原作者的第五行Object o map.get("obj");有错误 // region 同物料合并 Map<String, BOMVersionDetail> resultMap new HashMap<>(); for (BOMVersionDe…

对抗网络的简单版--手写数字MNIST的训练

1、对抗网络是一种数据驱动的网络。人为干预比较少。 其中生成网络的损失利用了鉴别器的损失。而鉴别器的数据数据输入利用了生成网络的生成数据跟真实数据。 两个网络再权重更新是互不干扰。都只更新自身的权重值。 下面是简单gan网络的实现代码&#xff1a; import tenso…

element-ui 中把el-table的某列隐藏

在需要隐藏的列加上v-iffalse即可

Deepfakes项目的安装与配置可能会出现的问题

1、其中再配置碗Deepfakes后&#xff0c;再运行项目指令&#xff1a; python faceswap.py convert -i ./faceswap/photo/trump/ -o ./faceswap/output/ -m ./faceswap/models/ 时进行报错&#xff1a; ImportError: cannot import name normalize_data_format 此时报的错是…

JS四舍五入、向上/下取整

Math是javascript的一个内部对象&#xff0c;该对象的方法主要是一些数学计算方法 floor&#xff1a;下退 Math.floor(12.9999) 12 ceil&#xff1a;上进 Math.ceil(12.1) 13; round: 四舍五入 Math.round(12.5) 13 Math.round(12.4) 12

自编码网络的简单版类似于PCA

1、自编码网络的知识点&#xff1a; 知道了自编码学习其实就是学习到了输入数据的隐含特征&#xff0c;通过新的特征来表征原始数据&#xff0c;本节将介绍如何使用这些隐含特征进行模式分类&#xff1b; 还是以前面的三层自编码网络&#xff1a; 抽象一下如下&#xff1a; 其…

JS - 控制小数位数的方法(保留小数点后N位、以及小数取整)

先写下自己的用法&#xff1a;parseFloat((Number(num)*100).toFixed(n)/100); 原文https://www.hangge.com/blog/cache/detail_1791.html

js常用分割取字符串的方法

1.substr substr(start,length)表示从start位置开始&#xff0c;截取length长度的字符串。 var src"images/off_1.png"; alert(src.substr(7,3));弹出值为&#xff1a;off2.substring substring(start,end)表示从start到end之间的字符串&#xff0c;包括start位置…