ElementUI-Table 可编辑行组件

最新推荐文章于 2025-05-06 21:45:00 发布

CharmingDang

最新推荐文章于 2025-05-06 21:45:00 发布

阅读量971

点赞数

CC 4.0 BY-SA版权

分类专栏： ElementUI 文章标签： elementui javascript 前端

本文链接：https://blog.youkuaiyun.com/CharmingDang/article/details/125521687

本文介绍如何利用ElementUI的Table组件创建可编辑行功能，通过JavaScript实现数据的动态更新和交互，增强前端表格的数据管理能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-card shadow="never" style="padding-right: 10px;">
    <span class="el-tag el-tag--primary" style="cursor: pointer;margin-bottom:10px;" v-on:click="addRow()">
        新增
    </span>
    <br />
    <el-table size="mini" :data="tableData" border style="width: 100%" highlight-current-row>
        <el-table-column label="平台" align="center">
            <template slot-scope="scope">
                <el-select v-if="scope.row.isSet" v-model="scope.row.PlatformId" 
                           placeholder="请选择平台" size="mini" filterable clearable required>
                    @foreach (var item in CommCache.PlatformDict)
                    {
                        <el-option label="@item.Value" :value="@item.Key"></el-option>
                    }
                </el-select>
                <span v-else>{
  
  {scope.row.PlatformName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="留钱" min-width="100" align="center">
            <template slot-scope="scope">
                <el-input v-if="scope.row.isSet" v-model="scope.row.Money" size="mini">
                    <template slot="append">¥</template>
                </el-input>
                <span v-else>{
  
  {scope.row.Money}}</span>
            </template>
        </el-table-column>

        <el-table