目录
1.数据列表复选框操作
数据列表可以选定某条数据也可以取消选择某条数据,翻页所选函数回到本页照常显示
1.1列表
<!--
- columns:表格的列头信息,包含表格每列的名称、对齐方式等设置。
- data-source:需要渲染在表格中的数据源,使用该属性可以快速展示数据。
- row-selection:它返回一个对象,包含了表格行选中功能所需的配置信息。具体来说,该计算属性返回一个包含selectedRowKeys、onChange和getCheckboxProps属性的对象。在选择复选框时此方法会触发
- selectedRowKeys:保存当前选中的行的ID,该选项和row-selection一起使用。
- pagination:是否开启分页功能。翻页触发
- row-key:指定表格数据源的唯一标识符,以便保证表格的正确性。
-->
<div class="firmwareList" v-show="showFirmwareList">
<a-table
:columns="columns"
:data-source="data"
:row-selection="rowSelection"
:selectedRowKeys="selectedRowKeys"
:pagination="pagination" row-key="id">
</a-table>
</div>
row-key="id"的作用就是记录已选中数据的标识,可以解决两个问题:一个是翻页以后已选数据同下标的数据复选框为选中状态,二是能翻页以后回到已有选择数据的页可以看到复选框为选中状态!
1.2相关属性以及方法
<script>
export default{
name:'TaskAdd',
data(){
return{
selectedRowKeys:[],//所有选中数据的id
//selectedRows:[],
selectedRowsData: [],//所有已选中的数据
//翻页
pagination:{
current:1,
total:0,
pageSize:10,
showQuickJumper:true,
showSizeChanger:true,
//翻页触发
onChange:(page, pageSize)=>{
this.pagination.current=page
this.pagination.pageSize=pageSize
console.log(page, pageSize)
//调用搜索函数更新表单
this.search();
},
//每页条数发生变化
onShowSizeChange:(current, size)=>{
this.pagination.current=current
this.pagination.pageSize=size
console.log(current, size)
//嗲用搜索函数更新表单
this.search();
}
},
}
},
methods:{
},
mounted(){
},
computed: {
rowSelection() {
return {
//selectedRowKeys: this.selectedRowKeys,
//注意下方的参数是触发以后的所选所有数据的id,而this.selectedRowKeys还是触发之前的,所以可以这样做删除
onChange: (selectedRowKeys, selectedRows) => {
//取消选择数据的处理
this.selectedRowKeys.forEach(row => { //遍历已经选中的行
if (!selectedRowKeys.find(item => item === row)){ //如果当前选中的行在新选中的行中不存在,说明该行被取消选中
//注意已选择的id跟选中数据对象中的id
const index = this.selectedRowsData.findIndex((item) => item.id === row); //从selectedRowsData中查找对应的数据
if (index !== -1) {
this.selectedRowsData.splice(index, 1); //如果找到了,就将其删除
}
}
})
//将更新后的key覆盖就keys
this.selectedRowKeys = selectedRowKeys;
//增加选择数据的处理
selectedRows.forEach(row => {
if (!this.selectedRowsData.find(item => item.id === row.id) ) {
this.selectedRowsData.push(row);
}
});
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
props: {
disabled: false,
name: record.name,
},
}),
};
},
},
}
</script>
2.已选择数据列表
点击已选择数据,可以查看到所有选择的数据,可以点击取消按钮取消选择本条数据,并且在列表页刷新,取消选择的数据复选框置为可选
2.1列表
<div class="selectfFirmware" v-show="showSelectfFirmware">
<div class="correlation-btn" v-for="(item,i) in selectedRowsData" :key="i">
<span style=" display: inline-block;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :title="item.firmwareName">{{item.firmwareName}}</span>
<!--删除按钮-->
<a-icon type="close" @click="delItem(i)" />
</div>
</div>
2.2相关属性以及方法
// 已选择固件列表展示
selectedFirmware(){
this.showFirmwareList=false
this.showSelectfFirmware=true
},
// 已选择固件删除
delItem(i){
//this.selectedRows.splice(i,1)
this.selectedRowKeys.splice(i,1)
this.selectedRowsData.splice(i,1)
},
.correlation-btn{
display: inline-block;
border: solid 1px #e8e8e8;
height: 30px;
line-height: 30px;
background-color: #fff;
text-align: center;
margin-right: 10px;
padding: 0 5px 0;
}