js动态添加table 添加行列，删除行列

<template>
  <div class="table-box">
    <div class="code">
      <textarea id="textarea" v-model="tablecode"></textarea>
    </div>
    <div class="tablebox">
      <div class="operation">
        <Button style="margin-right: 15px" type="primary" @click="addRows"
          >添加行</Button
        >
        <Button style="margin-right: 15px" type="primary" @click="addColumn"
          >添加列</Button
        >
        <InputNumber v-model="deleteRowValue" :min="3"></InputNumber>
        <Button style="margin-right: 15px" type="error" @click="deleteRows()"
          >删除行</Button
        >
        <InputNumber v-model="deleleColumnValue" :min="2"></InputNumber>
        <Button style="margin-right: 15px" type="error" @click="deleleColumn()"
          >删除列</Button
        >
      </div>
      <div id="table-main">
        <table
          cellspacing="0"
          width="100%"
          bordercolorlight="#333333"
          bordercolordark="#efefef"
        >
          <tr>
            <th style="text-align: center"></th>
          </tr>
          <tr>
            <td style="text-align: center"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "table",
  components: {},

  data() {
    return {
      tablecode: "",
      deleteRowValue: 3,
      deleleColumnValue: 2,
    };
  },
  watch: {
    tablecode: {
      deep: true,
      handler: function (val) {
        if (val) {
          document.getElementById("table-main").innerHTML = val;
        }
      },
    },
  },
  methods: {
    // 添加行
    addRows() {
      debugger;
      let table = document.getElementsByTagName("table")[0];
      let lastRow = table.rows[table.rows.length - 1];
      let newRow = lastRow.cloneNode(true);
      let tds = newRow.getElementsByTagName("td");
      for (let i = 0; i < tds.length; i++) {
        tds[i].innerHTML = ``;
      }
      let row = table.insertRow();
      row.innerHTML = this.nodeToString(newRow);
      this.getTableDom();
    },
    // 添加列
    addColumn() {
      let table = document.getElementsByTagName("table")[0];
      let rowLength = table.rows.length; //行数
      let columnLength = table.rows[1].cells.length; //列数
      var th = document.createElement("th");
      table.rows[0].appendChild(th);
      for (let i = 1; i < rowLength; i++) {
        let oTd = table.rows[i].insertCell(columnLength);
      }
      this.getTableDom();
    },
    // 删除指定行
    deleteRows() {
      let table = document.getElementsByTagName("table")[0];
      let rows_num = table.rows.length;
      if (rows_num > this.deleteRowValue - 1) {
        table.deleteRow(this.deleteRowValue - 1);
      }
    },
    // 删除指定列
    deleleColumn() {
      let table = document.getElementsByTagName("table")[0];
      let colums_num = table.rows[0].cells.length;
      if (colums_num > this.deleleColumnValue - 1) {
        for (var i = 0; i < table.rows.length; i++) {
          table.rows[i].deleteCell(this.deleleColumnValue - 1);
        }
      }
    },
    // 将dom转成string
    nodeToString(node) {
      let tmpNode = document.createElement("div");
      tmpNode.appendChild(node.cloneNode(true));
      let str = tmpNode.innerHTML;
      tmpNode = node = null;
      if (str.indexOf("data-v-") > -1) {
        let keyname = (" " + str).slice(1);
        keyname = keyname.substring(
          keyname.indexOf("data-v-"),
          keyname.indexOf('=""') + 3
        );
        var a = str.split(keyname);
        var b = a.join("");
        return b;
      }
      return str;
    },
    // 双击编辑
    changeTotext(obj) {
      //获取标签内的文本值
      let tdValue = obj.innerText;
      obj.innerText = "";
      //创建input标签对象
      let txt = document.createElement("input");
      txt.type = "text";
      //将文本值赋给input的value
      txt.value = tdValue;
      //新建input的id值(可以用数据库的ID值)
      txt.id = "_text_000000000_";
      //添加input节点，并放到td中
      obj.appendChild(txt);
      //选取域中的文本（双击时文本全选）
      txt.select();
      //双击之后改变样式
      obj.style.border = "1px dashed #ff9900";
      txt.style.border = "0px";
      txt.style.outline = "none";
    },
    // 取消单元格中的文本框，并将文本框中的值赋给单元格
    cancel(obj) {
      let txtValue = document.getElementById("_text_000000000_").value;
      //更改之后的值
      obj.innerText = txtValue;
      obj.style.border = "";
      obj.style.textAlign = "center";
      this.getTableDom();
    },
    // 获取dom
    getTableDom() {
      let table = document.getElementsByTagName("table")[0];
      this.tablecode = this.nodeToString(table);
    },
  },
  mounted() {
    let self = this;
    self.getTableDom();
    // 事件
    document.ondblclick = function () {
      //取得标签属性
      if (event.srcElement.tagName.toLowerCase() == "td") {
        //获得触发事件的元素
        //对象
        self.changeTotext(event.srcElement);
      }
      if (event.srcElement.tagName.toLowerCase() == "th") {
        //获得触发事件的元素
        //对象
        self.changeTotext(event.srcElement);
      }
    };
    //当鼠标抬起执行
    document.onmouseup = function () {
      if (
        document.getElementById("_text_000000000_") &&
        event.srcElement.id != "_text_000000000_"
      ) {
        let obj = document.getElementById("_text_000000000_").parentElement;
        self.cancel(obj);
      }
    };
  },
};
</script>
<style scoped>
.table-box {
  width: 100%;
  height: 100%;
}
.tablebox {
  height: 100%;
  width: 70%;
  float: left;
  background: #fff;
  border: 1px solid#ccc;
  overflow: scroll;
}
.operation {
  height: 60px;
  background: #f7f7f7;
  border-bottom: 1px solid#ccc;
  padding-top: 12px;
  padding-left: 5px;
}
.code {
  height: 100%;
  width: 30%;
  float: left;
  background: #f7f7f7;
  border: 1px solid#ccc;
}
.code #textarea {
  border: none;
  /* overflow: scroll; */
  height: 100%;
  width: 100%;
}
table tr th,
table tr td {
  border: solid 1px #ddd;
  border-collapse: collapse;
  height: 23px;
}
</style>
<style >
table tr th,
table tr td {
  border: solid 1px #ddd;
  border-collapse: collapse;
  height: 23px;
  min-width: 100px !important;
}
</style>