table表格的自增自减。不会乱删表格行

静静湖

已于 2022-06-17 18:01:56 修改

阅读量145

点赞数

文章标签： elementui vue.js javascript

于 2022-05-07 10:45:05 首次发布

本文链接：https://blog.csdn.net/m0_60608114/article/details/124626008

版权

Vue.js 表格操作动态数据组件事件处理

关键词由CSDN通过智能技术生成

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
      <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-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click.native.prevent="addrow(scope.$index)"></el-button>
          <el-button type="primary" icon="el-icon-remove-outline" @click.native.prevent="deleteRow(scope.$index,tableData)"></el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    }
  },
  methods:{
    //表格增加行
    addrow(index){
      var list={
          date: '2019-11-20',
          name: '郝小紫',
          address: '成都市武侯区永顺街123号'
        }
      this.tableData.splice(index+1,0,list)
    },
    //表格删除行
    deleteRow(index, rows) {
      if(rows.length > 1){  //若删除的行是表格的仅存的最后一行,则不能删除
        rows.splice(index, 1);
      }
    },
  }
}
</script>