博客

想在table标签里动态插入表头，结果报了题目的错，刚开始用拼接字符串拼接，下面解决后的是方法一(采用模板拼接)：

<template>
  <div class="container" style="background:#C3D08B">
    <table>
      <thead>
        <tr id="theadTr">
        </tr>
      </thead>
      <tbody>
        <tr>
          <!-- 第一个大类数据 -->
          <td><span>1</span><span>视频</span><span>919.56GB</span></td>
          <!-- 第二个大类数据 -->
          <td><span>6</span><span>音乐</span><span>38.49GB</span></td>
        </tr>
      </tbody>
    </table>
    <input v-model="classfyValue">
    <button @click="addClassfy">添加</button>
  </div>
</template>

// js
data(){
    return {
      classfyValue:'',
    }
  },
  methods: {
    addClassfy() {
      let th = document.createElement('th')
      th.innerHTML =`<span style="background-color:yellow">${this.classfyValue}</span>`
      document.getElementById('theadTr').appendChild(th)
    }
  }

后来想了想实在是有点麻烦，换成了不用模板字符串拼接了，方法二（直接循环对象）:

<template>
  <div class="container" style="background:#C3D08B">
    <table>
      <thead>
        <tr id="theadTr">
          <th class="active" v-for="(obj, index) in classfyArray" :key="index">{{obj}}</th>
         
        </tr>
      </thead>
      <tbody>
        <tr>
          <!-- 第一个大类数据 -->
          <td><span>1</span><span>视频</span><span>919.56GB</span></td>
          <!-- 第二个大类数据 -->
          <td><span>6</span><span>音乐</span><span>38.49GB</span></td>
        </tr>
      </tbody>
    </table>
    <input v-model="classfyValue">
    <button @click="addClassfy">添加</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      classfyValue:'',
      classfyArray:['业务大类排名','业务小类排名'],
    }
  },
  methods: {
    addClassfy() {
      this.classfyArray.push(this.classfyValue)
    }
  }
}
</script>