vue3：自定义可编辑表格

最新推荐文章于 2025-10-06 09:02:34 发布

原创

最新推荐文章于 2025-10-06 09:02:34 发布 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文深入探讨如何在Vue3中实现自定义的可编辑表格，包括使用模板语法、响应式数据绑定、事件处理以及组件复用等核心技巧。通过实例展示如何创建动态表格，并允许用户直接在表格单元格内进行编辑，提升前端应用的交互体验。

在这里插入图片描述

<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th>序号</th>
          <th>商品名称</th>
          <th>商品分类</th>
          <th>销售数量</th>
          <th>商品价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in stu" :key="index">
          <td>
            <div>{
  
  { index + 1 }}</div>
          </td>
          <td>
            <div v-if="!item.isChange">{
  
  { item.name }}</div>
            <div v-else>
              <a-input v-model:value="item.name"/>
            </div>
          </td>
          <td>
            <div v-if="!item.isChange">{
  
  { item.type }}<