前言

最近需求评审有这么一个需求，根据用户输入的row与column去生成对应的表格，就像excel那种的每种单元格可以编辑，本节就试着实现一下。

实现

因为该项目比较老，前后端不分离的，是在html中用Vue.component命令挂载组件，引入第三方库需要引入对应的js文件，所以先考虑用原生js+vue去实现该功能。整体思路还是很简单的，获取row与column通过v-for去生成表格，将每个单元格标签的contenteditable属性设置为true，然后添加blur等事件获取用户输入的值。 contenteditable用来设定元素是否可以被编辑，比如div：

    .box {
        width: 100px;
        height: 50px;
        background: orange;
     }
     <body>
    <div class="box" contenteditable></div>
  </body>

JIB0L2X2X5`M~I%4Y@290J7.png

根据上面分析的思路，我们要根据行列循环生成单元格，整个表格数据源用二维数组保存，我们先根据row与column生成对应的二维数组，然后循环二维数组去生成单元格。

   <template>
    <table>
      <tbody>
        <tr v-for="(rows, index) in arr" :key="index">
          <td v-for="(column, index) in rows" :key="index" contenteditable>
            {{ column.text }}
          </td>
        </tr>
      </tbody>
    </table>
</template>
<script setup>
const arr = Array.from({ length: 3 }, () => Array(3).fill({ text: 1 }));
</script>

生成二维数组运用到了Array.form方法，该方法能够快速帮我们生成数组。生成了单元格我们可以想要设置的样式，然后获取单元格dom元素，接下来就是获取输入的值，这里我们可以用blur事件来获取用填入的最新值。

   onMounted(() => {
  const elements = document.querySelectorAll("[contenteditable='true']");
  for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('blur', () => {
      console.log(elements[i].innerText);
    });
  }
});

这样我们就得到了一个自定义表格简单的demo，核心就是contenteditable属性，当然如果我们想要与vue结合得更好一点，可以用input等进行双向绑定，这样处理数据就会更加的方便。

总结

根据以上思路，我们可以给表格添加样式或者其他的自定义事件，最终满足需求的开发。

需求小能手——自定义表格

前言

实现

总结