1、一个表格合并后多选
数据格式
html原生代码：
<table
class="multi-table"
style="width: 100%; border-color: #ebeef5"
border="1px"
cellspacing="0"
>
<thead>
<tr>
<th>
<input
id="js-all-checkbox"
type="checkbox"
@click="checkAll(this)"
/>
</th>
<th>序号</th>
<th>产品名称</th>
<th>商标</th>
<th>型号规格</th>
<th>产品批号/编号</th>
<th>数量</th>
<th>生产日期</th>
<th>备注</th>
<th>产品大类</th>
<th>产品类型</th>
<th>检测标准</th>
<th>检测项目</th>
</tr>
</thead>
<tbody
style="text-align: center"
v-for="(item, index) in sample_list"
:key="index"
>
<tr>
<td :rowspan="item.items.length + 1">
<input
type="checkbox"
name="select"
:value="index"
@click="clickCheckbox(item, index)"
/>
</td>
<td :rowspan="item.items.length + 1">
{{ item.no }}
</td>
<td :rowspan="item.items.length + 1">
{{ item.cpmc }}
</td>
<td :rowspan="item.items.length + 1">
{{ item.sb }}
</td>
<td :rowspan="item.items.length + 1">
{{ item.xhgg }}
</td>
<td :rowspan="item.items.length + 1">
{{ item.cpbhph }}
</td>
<td :rowspan="item.items.length + 1">
{{ item.sl }}
</td>
<td :rowspan="item.items.length + 1">
{{ item.scrq }}
</td>
<td :rowspan="item.items.length + 1">
{{ item.remark }}
</td>
</tr>
<tr v-for="(value, i) in item.items" :key="i">
<td>
{{ value.cpdl }}
</td>
<td>
{{ value.cplx }}
</td>
<td>
{{ value.jcbz }}
</td>
<td>
{{ value.jcxm }}
</td>
</tr>
</tbody>
</table>data：{
checkValues: [], //原生表格多选选中的索引数组
}，
methods:{
// 原生多选
clickCheckbox(item, index) {
var checkDomArr = document.querySelectorAll(
".multi-table tbody input[type=checkbox]:checked"
);
this.checkValues = []; //选中的数组
for (var i = 0, len = checkDomArr.length; i < len; i++) {
this.checkValues.push(checkDomArr[i].value);
}
var allCheckDomArr = document.querySelectorAll(
".multi-table tbody input[type=checkbox]"
);
var allCheckbox = document.getElementById("js-all-checkbox");
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
if (!allCheckDomArr[i].checked) {
if (allCheckbox.checked) allCheckbox.checked = false;
break;
} else if (i === len - 1) {
document.getElementById("js-all-checkbox").checked = true;
return;
}
}
},
// 原生全选
checkAll(current) {
// 其余的多选框
var allCheckDomArr = document.querySelectorAll(
".multi-table tbody input[type=checkbox]"
);
// 全选框
var allcheckbox = document.getElementById("js-all-checkbox");
this.checkValues = [];
// 点击的时候, 状态已经修改, 所以没选中的时候状态时true
if (!allcheckbox.checked) {
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
var checkStatus = allCheckDomArr[i].checked;
if (checkStatus) allCheckDomArr[i].checked = false;
}
} else {
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
var checkStatus = allCheckDomArr[i].checked;
if (!checkStatus) allCheckDomArr[i].checked = true;
this.checkValues.push(allCheckDomArr[i].value);
}
}
},
}2、多个表格循环合并
我这里的表格是在elementUI的tabs页里的，所以数据格式多了一层
注意：
1、如果是tabs中的表格多选，一定要在表格上加判断，不然全选那边会出错
2、表格的id和全选的id都需要动态
<el-tabs v-model="active" @tab-click="handleClick">
<el-tab-pane
v-for="(item, ind) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
<div>
<el-button
v-if="active === '1'"
size="small"
@click="addgroup(item)"
class="addbtn"
>确认分组</el-button
>
<el-button
v-if="active === '1'"
size="small"
class="addbtn"
@click="ele(item)"
>删除</el-button
>
<el-button
v-if="active !== '1'"
size="small"
@click="elegroup(item)"
class="addbtn"
>取消分组</el-button
>
</div>
<table
v-if="active === String(ind + 1)"
:id="'multi' + active"
:class="['multi-table', 'multi-table' + active]"
style="width: 100%; border: none"
border="1px"
cellspacing="0"
>
<thead>
<tr>
<th>
<input
:id="'js-all-checkbox' + active"
type="checkbox"
@click="checkAll(this)"
/>
</th>
<th>序号</th>
<th>产品名称</th>
<th>商标</th>
<th>厂家</th>
<th>型号规格</th>
<th>产品批号/编号</th>
<th>数量</th>
<th>生产日期</th>
<th>备注</th>
<th>产品大类</th>
<th>产品类型</th>
<th>检测标准</th>
<th>检测项目</th>
</tr>
</thead>
<tbody
style="text-align: center"
v-for="(obj, index) in item.ceshiData"
:key="index"
>
<tr>
<td
:rowspan="obj.items.length + 1"
style="min-width: 30px; max-width: 30px"
>
<input
type="checkbox"
name="select"
:value="index"
@click="clickCheckbox(obj, index)"
/>
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 40px; max-width: 40px"
>
{{ obj.no }}
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 100px; max-width: 100px"
>
{{ obj.cpmc }}
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 70px; max-width: 70px"
>
{{ obj.sb }}
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 70px; max-width: 70px"
>
{{ obj.sccj }}
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 80px; max-width: 80px"
>
{{ obj.xhgg }}
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 80px; max-width: 80px"
>
{{ obj.cpbhph }}
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 70px; max-width: 70px"
>
{{ obj.sl }}
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 90px; max-width: 90px"
>
{{ obj.scrq }}
</td>
<td
:rowspan="obj.items.length + 1"
style="min-width: 100px; max-width: 150px"
>
{{ obj.remark }}
</td>
</tr>
<tr v-for="(value, i) in obj.items" :key="i">
<td style="min-width: 80px; max-width: 80px">
{{ value.cpdl }}
</td>
<td style="min-width: 100px; max-width: 150px">
{{ value.cplx }}
</td>
<td style="min-width: 100px; max-width: 130px">
{{ value.jcbz }}
</td>
<td style="min-width: 100px; max-width: 150px">
{{ value.jcxm }}
</td>
</tr>
</tbody>
</table>
</el-tab-pane>
</el-tabs>data:{
editableTabs: [
// {
// title: "待分组", //分页名称
// name: "1", //分页序号，一定是字符串形式 1、2、3、4
// ceshiData: [], //分页数组
// },
],//tabs的格式
active: "1",
checkValues: [], //分组多选的索引
ceshimultiple：[],//分组多选的数组
},
methods:{
ele(item) {
if (this.checkValues.length > 0) {
this.checkValues.forEach((j) => {
this.editableTabs[Number(item.name) - 1].ceshiData.splice(
Number(j),
1
);
});
if (this.editableTabs[0].length === 0) {
// 全选框
var allcheckbox = document.getElementById("js-all-checkbox1");
allcheckbox.checked = false;
}
} else {
this.$message.warning("请先选择需要删除的分组");
}
},
addgroup() {
if (this.checkValues.length > 0) {
this.checkValues.forEach((j) => {
this.editableTabs[0].ceshiData.forEach((i, idx) => {
if (Number(j) === idx) {
this.ceshimultiple.push(i);
}
});
});
this.ceshidialog = true;
} else {
this.$message.warning("请先选择需要分组的选项");
}
},
// 取消分组
elegroup(item) {
if (this.checkValues.length > 0) {
this.checkValues.forEach((j) => {
this.editableTabs[Number(item.name) - 1].ceshiData.forEach(
(i, idx) => {
if (Number(j) === idx) {
this.ceshimultiple.push(i);
}
}
);
});
let arr4 = this.editableTabs[Number(item.name) - 1].ceshiData.filter(
(item) => {
return this.ceshimultiple.every((item2) => {
return item.qdxh !== item2.qdxh;
});
}
);
this.editableTabs[Number(item.name) - 1].ceshiData = arr4;
this.active = "1";
this.editableTabs[0].ceshiData.unshift(...this.ceshimultiple);
if (this.editableTabs[Number(item.name) - 1].ceshiData.length === 0) {
this.editableTabs.splice(Number(item.name) - 1, 1);
}
// 序号重新排序
this.editableTabs[0].ceshiData.forEach((it, idn) => {
it.no = idn + 1;
});
} else {
this.$message.warning("请先选择移除的选项");
}
//重新排序active
this.editableTabs.forEach((i, ind) => {
i.name = ind + 1 + "";
});
this.ceshimultiple = [];
this.checkValues = [];
},
// 原生多选
clickCheckbox(item, index) {
// 选中的
var checkDomArr = document.querySelectorAll(
".multi-table" + this.active + " tbody input[type=checkbox]:checked"
);
this.checkValues = []; //选中的数组
for (var i = 0, len = checkDomArr.length; i < len; i++) {
this.checkValues.push(checkDomArr[i].value);
}
// 所有选择框
var allCheckDomArr = document.querySelectorAll(
".multi-table" + this.active + " tbody input[type=checkbox]"
);
var allCheckbox = document.getElementById(
"js-all-checkbox" + this.active
);
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
if (!allCheckDomArr[i].checked) {
if (allCheckbox.checked) allCheckbox.checked = false;
break;
} else if (i === len - 1) {
document.getElementById(
"js-all-checkbox" + this.active
).checked = true;
return;
}
}
},
// 原生全选
checkAll(current) {
// 其余的多选框
var allCheckDomArr = document.querySelectorAll(
".multi-table" + this.active + " tbody input[type=checkbox]"
);
// 全选框
var allcheckbox = document.getElementById(
"js-all-checkbox" + this.active
);
this.checkValues = [];
// 点击的时候, 状态已经修改, 所以没选中的时候状态时true
if (!allcheckbox.checked) {
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
var checkStatus = allCheckDomArr[i].checked;
if (checkStatus) allCheckDomArr[i].checked = false;
}
} else {
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
var checkStatus = allCheckDomArr[i].checked;
if (!checkStatus) allCheckDomArr[i].checked = true;
this.checkValues.push(allCheckDomArr[i].value);
}
}
},
}3、横向、纵向滚动条
<div style="overflow-x: auto">
<table
class="multi-table"
style="width: 100vw"
border="1px"
cellspacing="0"
>
</table>
</div>在table的外面的盒子，添加overflow-x: auto或overflow-y: auto，然后给table自身设置宽度即可完成表格有滚动条
4、js原生表格左右调整列宽
方法一（表格的整个宽度也会随着改变）
<table
class="multi-table"
style="border: none; margin-top: 0px; width: 100vw"
border="1px"
cellspacing="0"
id="tb_3"
>
//。。。。。
</table>updated() {
this.resizeTableCol("#tb_3");
},
methods: {
resizeTableCol(id) {
var i,
self,
table = document.querySelector(id),
header = table.rows[0],
tableX = header.clientWidth,
length = header.cells.length;
for (i = 0; i < length; i++) {
header.cells[i].onmousedown = function () {
self = this;
if (event.offsetX > self.offsetWidth - 10) {
self.mouseDown = true;
self.oldX = event.x;
self.oldWidth = self.offsetWidth;
}
};
header.cells[i].onmousemove = function () {
if (event.offsetX > this.offsetWidth - 10) {
this.style.cursor = "col-resize";
} else {
this.style.cursor = "default";
}
if (self == undefined) {
self = this;
}
if (self.mouseDown != null && self.mouseDown == true) {
self.style.cursor = "default";
if (self.oldWidth + (event.x - self.oldX) > 0) {
self.width = self.oldWidth + (event.x - self.oldX);
}
self.style.width = self.width;
table.style.width = tableX + (event.x - self.oldX) + "px";
self.style.cursor = "col-resize";
}
};
table.onmouseup = function () {
if (self == undefined) {
self = this;
}
self.mouseDown = false;
self.style.cursor = "default";
tableX = header.clientWidth;
};
}
},
}转载与：https://www.codenong.com/cs106050899/
方法二（表格的整个宽度不会改变）
<table
class="multi-table"
style="border: none; margin-top: 0px; width: 100vw"
border="1px"
cellspacing="0"
id="tb_3"
>
//。。。。。
</table>updated() {
this.Controlwidth();
},
methods: {
Controlwidth() {
var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
var table = document.getElementById("tb_3");
var down = false;
for (var i = 0; i < table.rows[0].cells.length; i++) {
table.rows[0].cells[i].onmousedown = function () {
//记录单元格
tTD = this;
if (event.offsetX > tTD.offsetWidth - 10) {
down = true;
tTD.oldX = event.x;
tTD.oldWidth = tTD.offsetWidth;
}
//记录Table宽度
table = tTD;
while (table.tagName != "TABLE") table = table.parentElement;
tTD.tableWidth = table.offsetWidth;
};
table.rows[0].cells[i].onmousemove = function () {
//更改鼠标样式
if (event.offsetX > this.offsetWidth - 10)
this.style.cursor = "col-resize";
else this.style.cursor = "default";
//取出暂存的Table Cell
if (tTD == undefined) tTD = this;
};
}
document.onmouseup = function () {
if (down) {
//结束宽度调整
if (tTD == undefined) tTD = this;
down = false;
tTD.style.cursor = "default";
}
};
document.onmousemove = function () {
if (down) {
//调整宽度
if (down) {
tTD.style.cursor = "default";
if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
//调整列宽
tTD.style.width = tTD.width;
tTD.style.cursor = "col-resize";
//调整该列中的每个Cell
table = tTD;
while (table.tagName != "TABLE") table = table.parentElement;
// for (i = 0; i < table.rows.length; i++) {
// table.rows[i].cells[tTD.cellIndex].width = tTD.width;
// }
//调整整个表
table.width = tTD.tableWidth + (tTD.offsetWidth - tTD.oldWidth);
table.style.width = table.width;
}
}
};
},
}
扫一扫
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
