原生js实现table 横向纵向全选功能

要实现这种功能，很明显用elment ui实现不了。element ui 纵向需要prop名字不一样才能展示，很明显，我这个一层二层是名字一样的数组
期望后台返回数组

是这种格式。
所有需要自己用table tr td 去画表格，而且使用element ui 的checkbox我实现不了纵向全选，所有全部使用了原生js。

//templat部分<table class="table-style">//纵向全选表头<th  v-for="(item,index) in thList" :key="'th'+index"><div v-show="index!==0"><input  type="checkbox" class="check" @click="verCheck(index)"/><span>全选</span></div></th><div></div><tr v-for="(item,xIndex) in trList" :key="xIndex" class="check-unit">//横向表头<td><input type="checkbox" class="check" @click="transverseClick(xIndex)"/>{{item.floor}}层</td>//单元表格<td v-for="(citem,yIndex) in item.unitList" :key="citem.keys" ><div><input type="checkbox" class="check" @click="(e)=>unitCheckClick(e,xIndex,yIndex)" :class="['verCheck'+yIndex,'tran'+xIndex]"/>{{citem.unit}}</div></td></tr></table>data() {return {trList: [{ floor: 1,key: 1,unitList: [{ keys: 1, unit: '101', area: '90m²', house: '2室1厅1卫1阳台' },{ keys: 2, unit: '102', area: '90m²', house: '2室1厅1卫1阳台' },{ keys: 3, unit: '103', area: '90m', house: '2室1厅1卫1阳台' },{ keys: 4, unit: '104', area: '90m', house: '2室1厅1卫1阳台' },{ keys: 5, unit: '105', area: '90m', house: '2室1厅1卫1阳台' },{ keys: 6, unit: '106', area: '90m', house: '2室1厅1卫1阳台' }]},{ floor: 2,key: 2,unitList: [{ keys: 1, unit: '201', area: '90m', house: '2室1厅1卫1阳台' },{ keys: 2, unit: '202', area: '90m', house: '2室1厅1卫1阳台' }]},{ floor: 3,key: 3,unitList: [{ keys: 1, unit: '301', area: '90m', house: '2室1厅1卫1阳台' }]}],thList: [],//表头全选数组checkedUitList: [] // 被选中单元列表}},methods: {// 填充无单元信息表格fillTd() {let max = 0max = this.trList[0].unitList.lengthfor (const i in this.trList) {const cur = this.trList[i].unitList.lengthcur > max ? max = cur : null}// 根据最长单元数获取表头for (let i = 0; i < max + 1; i++) {this.thList.push(i)}},// 单元checkboxunitCheckClick(e, x, y) {//传入点击单个checkbox的横纵索引，通过索引获取单元信息const unit = this.trList[x].unitList[y].unitconsole.log('check', e.target.checked, this.trList[x].unitList[y].unit)//checkedUitList为提交数组，如果选中push选中数据，如果取消选中，则移除之前选中数据if (e.target.checked) {this.checkedUitList.push(unit)} else {this.checkedUitList.map((i, index) => {if (i === unit) {console.log(i)this.checkedUitList.splice(index, 1)}})}console.log(this.checkedUitList)},// 纵向全选checkboxverCheck(index) {//传入纵向索引const num = index - 1const div = document.querySelectorAll('.verCheck' + num)// div.checked = truefor (let i = 0; i < div.length; i++) {div[i].checked = !div[i].checkedif (div[i].checked) {this.trList.map(i => {//纵向单元格可以为3，也可以为2，所以i.unitList[index - 1]可能为undefined，报错，所以判断是否存在，存在push数据if (i.unitList[index - 1]) {this.checkedUitList.push(i.unitList[index - 1].unit)}})//数组去重this.checkedUitList = this.unique(this.checkedUitList)console.log(this.checkedUitList)} else {//去除取消选中值this.trList.map(i => {this.checkedUitList.map((j, jIndex) => {if (i.unitList[index - 1]) {if (i.unitList[index - 1].unit === j) {this.checkedUitList.splice(jIndex, 1)}}})})}console.log(this.checkedUitList)}},// 横向全选transverseClick(index) {const div = document.querySelectorAll('.tran' + index)for (let i = 0; i < div.length; i++) {div[i].checked = !div[i].checkedif (div[i].checked) {this.trList[index].unitList.map(i => {this.checkedUitList.push(i.unit)})} else {console.log(index)this.trList[index].unitList.map(i => {this.checkedUitList.map((j, jIndex) => {if (i.unit === j) {this.checkedUitList.splice(jIndex, 1)}})})}}console.log(div, this.checkedUitList)},// 数组去重unique(arr) {for (var i = 0; i < arr.length; i++) {for (var j = i + 1; j < arr.length; j++) {if (arr[i] === arr[j]) {// 如果第一个等于第二个，splice方法删除第二个arr.splice(j, 1)j--}}}return arr}}

全选纵向横向不可同时选择，使用name=‘tranCheckAll[]’
<input type=“checkbox” :class=“[‘check’+‘floor’+xIndex]” name=‘tranCheckAll[]’ @click=“transverseClick(xIndex)”/>
使用document.getElementsByName(‘tranCheckAll[]’)获取该行选择框使用循环去改变是否可以选择
for (let j = 0; j < tranCheckAll.length; j++) {
tranCheckAll[j].disabled = false
}

原生js实现table 横向纵向全选功能相关推荐

原生js实现table表格的各行变色功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
利用JS来实现表格的全选、全不选、反选以及删除的功能
利用JS来进行表格的选择删除等功能二.代码 1.表格的制作以及事件的绑定 2.全选按钮的功能实现 3.全不选按钮的功能实现 4.反选按钮的功能实现 5.删除按钮的功能实现 6.鼠标悬停时颜色的变化 ...
layui table 全选过滤_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
暑期学习日记34：js全选功能
今天学习了使用js实现全选功能,点击全选的复选框后会将下面所有的复选框变为被选择状态. 代码如下: <!doctype html> <html> <head> &l ...
JS全选功能代码优化
JS全选功能代码优化原文:JS全选功能代码优化 JS全选功能代码优化最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想用另一种模式来编写JS代码,所以针对之 ...
vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
【javascript】js实现表格全选功能
效果: 一个表格实现单选功能和全选功能. <!DOCTYPE html> <html lang="en"> <head><meta ch ...
微信小程序实现单选、全选功能
前言概述本文介绍微信小程序实现单选.全选功能,效果如下: 实现过程 1.先实现页面效果,文件*.wxml和*.wxss代码如下: <view class="container&quo ...
layui表格监听全选_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...

原生js实现table 横向纵向全选功能

原生js实现table 横向纵向全选功能相关推荐

最新文章

热门文章