当前位置：首页 > uni-app

uniapp 编辑表格

2026-03-05 14:51:06uni-app

uniapp 编辑表格的实现方法

在uniapp中实现表格编辑功能，可以通过以下方式完成：

使用uni-table组件

uniapp官方提供了uni-table组件，可以快速构建表格结构。通过结合input或textarea组件实现编辑功能。

<uni-table>
  <uni-tr>
    <uni-th>姓名</uni-th>
    <uni-th>年龄</uni-th>
    <uni-th>操作</uni-th>
  </uni-tr>
  <uni-tr v-for="(item, index) in tableData" :key="index">
    <uni-td>
      <input v-model="item.name" @blur="saveData(index)"/>
    </uni-td>
    <uni-td>
      <input v-model="item.age" type="number" @blur="saveData(index)"/>
    </uni-td>
    <uni-td>
      <button @click="deleteRow(index)">删除</button>
    </uni-td>
  </uni-tr>
</uni-table>

使用第三方表格组件

对于更复杂的需求，可以使用第三方表格组件如：

u-table
mescroll-uni
uni-data-table

这些组件通常提供更丰富的功能，如排序、筛选、分页等。

自定义表格实现

对于完全自定义的需求，可以通过flex布局或grid布局自行构建表格：

<view class="table">
  <view class="row header">
    <view class="cell">姓名</view>
    <view class="cell">年龄</view>
    <view class="cell">操作</view>
  </view>
  <view class="row" v-for="(item, index) in tableData" :key="index">
    <view class="cell">
      <input v-model="item.name"/>
    </view>
    <view class="cell">
      <input v-model="item.age"/>
    </view>
    <view class="cell">
      <button @click="deleteRow(index)">删除</button>
    </view>
  </view>
</view>

.table {
  width: 100%;
}
.row {
  display: flex;
  border-bottom: 1px solid #eee;
}
.cell {
  flex: 1;
  padding: 10px;
}
.header {
  font-weight: bold;
  background-color: #f5f5f5;
}

数据绑定与保存

无论采用哪种方式，都需要处理好数据绑定和保存逻辑：

data() {
  return {
    tableData: [
      { name: '张三', age: 25 },
      { name: '李四', age: 30 }
    ]
  }
},
methods: {
  saveData(index) {
    // 这里可以添加保存到后端或本地的逻辑
    console.log('保存数据:', this.tableData[index])
  },
  deleteRow(index) {
    this.tableData.splice(index, 1)
  }
}