*初级小白*~ 2022-09-06 17:12 采纳率: 97.9%
浏览 92
已结题

点击删除，如何把表格最后的操作一列给删除

点击删除，如何把表格最后的操作一列给删除


 
<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">18</th>
              <th rowspan="2">操作</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 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>
  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-09-06 17:16
    关注

    用一个变量设置是否删除，然后删除后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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 9月15日
  • 已采纳回答 9月7日
  • 创建了问题 9月6日

悬赏问题

  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么