用vue实现(checkbox)复选框全选

最近写项目 js的全选选中了但是id传不过去 然后 查了查百度弄好了
整理一下:
这个是我需要选择的复选框(一部分代码):

<tr  v-for="(s,key) in sites" >
	<td<input type="checkbox" name="id"  v-model="nid" :value="s.nid" />
	{{key+1}}</td>

全选的复选框:

<input type="checkbox" @click="checkAll" v-model="checked"  /><span>全选</span> 

vue需要从data里加两个属性:

nid:[],
checked:false

坚持了你最不想干的事,便能得到,你最想要的。——宫崎骏
在这里插入图片描述
下面到了vue代码了:

checkAll(){
    if(this.checked==false){
      this.nid=[];//清空数据
    }else{
      this.sites.forEach((sites)=>{
	      if(this.nid.indexOf(sites.nid)==-1){
	        this.nid.push(sites.nid)
	      }
      })
    }
  },
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 Ant Design Vue2 表格中,可以通过设置 `row-selection` 属性来为表格添加复选框。如果需要为复选框全选处添加文字,可以在 `row-selection` 属性中设置 `checkStrictly` 和 `renderCell` 两个属性。具体做法如下: 1. 在 Table 组件中设置 `row-selection` 属性,其中 `checkStrictly` 属性用于控制是否严格检查复选框的选中状态,`renderCell` 属性用于渲染复选框列,并在全选处添加文字。 ``` <template> <a-table :columns="columns" :data-source="data" row-selection="{checkStrictly: true, renderCell: renderSelection}"> </a-table> </template> ``` 2. 在 `methods` 中定义 `renderSelection` 方法,用于渲染复选框列和全选处文字。在 `renderSelection` 方法中,先根据 `record` 和 `index` 判断当前行是否可选,然后根据 `record` 的 `selected` 属性确定复选框的选中状态,最后在全选处添加文字。 ``` <script> export default { data() { return { columns: [ { title: '', dataIndex: 'checkbox', width: '50px' }, { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' } ], data: [ { id: '1', name: 'John Brown', age: 32, selected: false }, { id: '2', name: 'Jim Green', age: 42, selected: false }, { id: '3', name: 'Joe Black', age: 32, selected: false } ] }; }, methods: { renderSelection(h, { record, index }) { const selectable = !record.disabled; const selected = record.selected; return ( <div class="selection-cell"> <a-checkbox value={record.id} disabled={!selectable} checked={selected} on-change={(e) => this.handleSelectionChange(e, record)} ></a-checkbox> {index === 0 && ( <span class="selection-all"> {this.isAllSelected() ? '取消全选' : '全选'} </span> )} </div> ); }, isAllSelected() { return this.data.every((item) => item.selected); }, handleSelectionChange(e, record) { record.selected = e.target.checked; } } }; </script> <style scoped> .selection-cell { display: flex; align-items: center; } .selection-all { margin-left: 10px; color: #1890ff; cursor: pointer; } </style> ``` 这样就可以为表格的复选框全选处添加文字了。需要注意的是,如果需要获取选中的行,可以通过 `this.data.filter(item => item.selected)` 来获取。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值