手动向表格中添加和删除数据

爱吃羊的狗

已于 2023-03-13 16:27:53 修改

阅读量101

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端 elementui vue

于 2023-03-13 16:20:34 首次发布

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/129497061

vue 专栏收录该内容

28 篇文章

订阅专栏

该文章展示了如何在Vue.js应用中操作表格数据，包括使用`apexTableData`存储表格内容，通过`addData`方法添加新对象到表格，以及根据`apexCheckList`选中项调用`delData`方法删除对应的数据行。

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

手动向表格中添加和删除数据

<el-table :data="apexTableData" @select="apexSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
 <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
</el-table>

data(){
  return{
    apexTableData:[],//表格数据
    apexCheckList: [], //选中项
  }
}

向表格中添加数据

addData(){
      let obj = {
        name: "",
        longitude: "",
        latitude: "",
      };
      this.apexTableData.push(obj);
}

根据选中项删除表格中的数据

delData() {
      this.apexCheckList.map((item) => {
        let index = this.apexTableData.indexOf(item);
        console.log(index, "删除的下标");
        this.apexTableData.splice(index, 1);
      });
    },