vue 原生table表格中插入、删除行

最新推荐文章于 2024-08-06 17:23:10 发布

zyy_wx

最新推荐文章于 2024-08-06 17:23:10 发布

阅读量537

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zyy_wx/article/details/133879315

版权

vue中有时候需要表格展示，工作简历行需要能插入、删除空白行。下面以当前行为例：

<tr v-for="(item,index) in trList" :key="index">
        <td class="h1">
          <divEdit v-model="item.name" class="full"></divEdit>
        </td>
        <td colspan="6" class="orientation">
          <divEdit v-model="item.content" class="full"></divEdit>
          <div class="operate">
            <div @click="onAdd(index)">
              <el-link>插入</el-link>
            </div>
            <div @click="onDel(index)" v-if="index !== 0">
              <el-link>删除</el-link>
            </div>
          </div>
        </td>
      </tr>

<script>
data() {
    return {
      trList: [{name: '', content: ''}]
    }
  },
methods: {
    // 增加一行
    onAdd(index) {
      this.trList.splice(index + 1, 0, {name: '', content: ''})
    },
    // 删除当前行
    onDel(index) {
      this.trList.splice(index, 1)
    }
  }
</script>

<style>
// 插入、删除定位
.orientation {
  position: relative;
}

.operate {
  position: absolute;
  top: 0;
  right: -32px;
}
</style>

效果图：