点击删除，如何把表格最后的操作一列给删除
<template>
<div><button @click="del">删除button>div>
<div ref="printHtml">
<div class="wraper">
<div>
<table border="1px" cellspacing="0" cellpadding="15px">
<thead>
<tr>
<th rowspan="2">1th>
<th rowspan="2">2th>
<th rowspan="2">3th>
<th rowspan="2">4th>
<th rowspan="2">5th>
<th rowspan="2">6th>
<th rowspan="2">7th>
<th rowspan="2">8th>
<th rowspan="2">9th>
<th rowspan="2">0th>
<th rowspan="2">11th>
<th rowspan="2">12th>
<th rowspan="2">13th>
<th rowspan="2">14th>
<th rowspan="2">15th>
<th colspan="2">16th>
<th rowspan="2">17th>
<th rowspan="2">18th>
<th rowspan="2">操作th>
tr>
<tr>
<th>辅Ath>
<th>辅Bth>
tr>
thead>
<tbody>
<tr v-for="(item,index) in data" :key="index">
<td>{{index}}td>
<td>12td>
<td>12td>
<td>1td>
<td>2td>
<td>2td>
<td>2td>
<td>2td>
<td>3td>
<td>2td>
<td>3td>
<td>3td>
<td>3td>
<td>3td>
<td>3td>
<td colspan="2">3td>
<td>4td>
<td>5td>
<td>6td>
tr>
tbody>
table>
div>
div>
div>
template>
<script>
import { reactive, ref } from "vue";
export default {
setup() {
const data = [
{
"1": 40,
"2": 3077,
"3": null,
"4": null,
"5": null,
"6": null,
"7": 2,
"8": 8300,
"9": 0,
"10": null,
"11": null,
"12": null,
"13": "PP11",
"14": 40,
"15": 3000,
"16": 18,
"17": 7,
"18": [
"11220303201"
],
"19": [
"SN25-ZJ-FY1-BF"
],
},
{
"1": 40,
"2": 3077,
"3": null,
"4": null,
"5": null,
"6": null,
"7": 2,
"8": 8300,
"9": 0,
"10": null,
"11": null,
"12": null,
"13": "PP11",
"14": 40,
"15": 3000,
"16": 18,
"17": 7,
"18": [
"11220303201"
],
"19": [
"SN25-ZJ-FY1-BF"
],
},
{
"1": 40,
"2": 3077,
"3": null,
"4": null,
"5": null,
"6": null,
"7": 2,
"8": 8300,
"9": 0,
"10": null,
"11": null,
"12": null,
"13": "PP11",
"14": 40,
"15": 3000,
"16": 18,
"17": 7,
"18": [
"11220303201"
],
"19": [
"SN25-ZJ-FY1-BF"
],
},
{
"1": 40,
"2": 3077,
"3": null,
"4": null,
"5": null,
"6": null,
"7": 2,
"8": 8300,
"9": 0,
"10": null,
"11": null,
"12": null,
"13": "PP11",
"14": 40,
"15": 3000,
"16": 18,
"17": 7,
"18": [
"11220303201"
],
"19": [
"SN25-ZJ-FY1-BF"
],
},
]
const del=()=>{
}
return {
del,
data,
};
},
};
script>
<style lang="scss" scoped>
.table {
border: none;
border-collapse: collapse;
background: white;
text-align: center;
margin-top: 10px;
thead {
tr {
color: white;
height: 30px;
th {
background-color: rgba(255, 140, 45, 0.44);
min-width: 100px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
}
tbody {
tr {
height: 30px;
color: black;
td {
border: 1px solid rgba(0, 0, 0, 0.1);
position: -webkit-sticky;
position: sticky;
min-width: 100px;
}
}
}
}
style>
用一个变量设置是否删除，然后删除后18列要同时加个colspan="2"，要不会空列，示例如下
<template>
<div><button @click="del">删除</button></div>
<div ref="printHtml">
<div class="wraper">
<div>
<table border="1px" cellspacing="0" cellpadding="15px">
<thead>
<tr>
<th rowspan="2">1</th>
<th rowspan="2">2</th>
<th rowspan="2">3</th>
<th rowspan="2">4</th>
<th rowspan="2">5</th>
<th rowspan="2">6</th>
<th rowspan="2">7</th>
<th rowspan="2">8</th>
<th rowspan="2">9</th>
<th rowspan="2">0</th>
<th rowspan="2">11</th>
<th rowspan="2">12</th>
<th rowspan="2">13</th>
<th rowspan="2">14</th>
<th rowspan="2">15</th>
<th colspan="2">16</th>
<th rowspan="2">17</th>
<th rowspan="2" :colspan="colspan">18</th>
<th rowspan="2" v-if="showop">操作</th>
</tr>
<tr>
<th>辅A</th>
<th>辅B</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in data" :key="index">
<td>{{ index }}</td>
<td>12</td>
<td>12</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td colspan="2">3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import { reactive, ref } from "vue";
export default {
setup() {
const data = [
{
1: 40,
2: 3077,
3: null,
4: null,
5: null,
6: null,
7: 2,
8: 8300,
9: 0,
10: null,
11: null,
12: null,
13: "PP11",
14: 40,
15: 3000,
16: 18,
17: 7,
18: ["11220303201"],
19: ["SN25-ZJ-FY1-BF"],
},
{
1: 40,
2: 3077,
3: null,
4: null,
5: null,
6: null,
7: 2,
8: 8300,
9: 0,
10: null,
11: null,
12: null,
13: "PP11",
14: 40,
15: 3000,
16: 18,
17: 7,
18: ["11220303201"],
19: ["SN25-ZJ-FY1-BF"],
},
{
1: 40,
2: 3077,
3: null,
4: null,
5: null,
6: null,
7: 2,
8: 8300,
9: 0,
10: null,
11: null,
12: null,
13: "PP11",
14: 40,
15: 3000,
16: 18,
17: 7,
18: ["11220303201"],
19: ["SN25-ZJ-FY1-BF"],
},
{
1: 40,
2: 3077,
3: null,
4: null,
5: null,
6: null,
7: 2,
8: 8300,
9: 0,
10: null,
11: null,
12: null,
13: "PP11",
14: 40,
15: 3000,
16: 18,
17: 7,
18: ["11220303201"],
19: ["SN25-ZJ-FY1-BF"],
},
];
const showop = ref(true);
const colspan=ref(1);
const del = () => {
showop.value = false;
colspan.value=2;
};
return {colspan,
showop,
del,
data,
};
},
};
</script>
<style lang="scss" scoped>
.table {
border: none;
border-collapse: collapse;
background: white;
text-align: center;
margin-top: 10px;
thead {
tr {
color: white;
height: 30px;
th {
background-color: rgba(255, 140, 45, 0.44);
min-width: 100px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
}
tbody {
tr {
height: 30px;
color: black;
td {
border: 1px solid rgba(0, 0, 0, 0.1);
position: -webkit-sticky;
position: sticky;
min-width: 100px;
}
}
}
}
</style>
定义个变量op，初始设置为true，然后操作那一列改成
<th rowspan="2" v-if="op">操作</th>
操作对应的那一列数据也加上 v-if="op"
然后删除的逻辑里面设置op改为false
动态渲染表格，要么用显示隐藏
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！