el-table可编辑表格添加、删除、编辑行

山谷里的杂货铺

于 2021-09-01 16:42:43 发布

阅读量1.7k

点赞数

文章标签： javascript vue.js elementui es6

本文链接：https://blog.csdn.net/weixin_58528200/article/details/120043428

版权

本文介绍如何使用Vue.js结合Element-UI库，实现可编辑的表格功能，包括添加、删除和编辑表格行的操作。通过利用Element-UI的表格组件特性，结合ES6语法，可以方便地构建交互式的数据管理界面。

摘要由CSDN通过智能技术生成

<el-table :data="addTable"
            ref="addTable"
            style="width:80%">
            <el-table-column type="index" label="选项" width="100px">
            </el-table-column>
            <el-table-column label="内容" prop="content">
              <template slot-scope="scope">
                <el-input size="small" 
                  v-model="scope.row.content"
                  :placeholder="scope.row.content">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <e