vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

以下是“vuejs element table 表格添加行,修改,单独删除行,批量删除行操作”的攻略。

添加行

要添加行，首先需要在data中定义一个空的数组来存放表格数据。然后，在模板中使用el-table组件和el-table-column组件来渲染表格，并给el-table组件绑定数据源。

接下来，我们可以在模板中添加一个类似“添加行”的按钮，当用户点击这个按钮时，在data中定义的数据数组中新增一条数据，并将其渲染到表格中。

下面是一个简单的示例：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="handleAdd">添加行</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    handleAdd() {
      this.tableData.push({
        name: '',
        age: '',
        address: ''
      })
    }
  }
}
</script>

修改行

要修改行，我们可以在每一行的操作列中添加一个“编辑”按钮，用户点击该按钮时，可以弹出一个表单，允许用户修改该行数据。

我们需要在data中定义一个变量来存储当前正在编辑的行的索引，然后在模板中判断该变量的值，如果为当前行的索引，则显示表单用于修改数据，否则显示文本用于展示数据。

下面是一个示例：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名">
        <template #default="{ row }">
          <template v-if="editIndex === row.$index">
            <el-input v-model="row.name"></el-input>
          </template>
          <template v-else>{{ row.name }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄">
        <template #default="{ row }">
          <template v-if="editIndex === row.$index">
            <el-input v-model.number="row.age"></el-input>
          </template>
          <template v-else>{{ row.age }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template #default="{ row }">
          <template v-if="editIndex === row.$index">
            <el-input v-model="row.address"></el-input>
          </template>
          <template v-else>{{ row.address }}</template>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' }
      ],
      editIndex: -1
    }
  },
  methods: {
    handleEdit(row) {
      this.editIndex = row.$index
    },
    handleDelete(row) {
      const index = this.tableData.indexOf(row)
      if (index !== -1) {
        this.tableData.splice(index, 1)
      }
    }
  }
}
</script>

单独删除行

要单独删除行，我们可以给表格中每一行的操作列添加一个“删除”按钮，用户点击该按钮时可以删除该行。

我们可以在模板中为每一行的操作列绑定一个方法，当用户点击该按钮时，将当前行作为参数传入方法。

下面是一个示例：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' }
      ]
    }
  },
  methods: {
    handleDelete(row) {
      const index = this.tableData.indexOf(row)
      if (index !== -1) {
        this.tableData.splice(index, 1)
      }
    }
  }
}
</script>

批量删除行

要批量删除行，我们可以在表格头部添加一个“全选”复选框，当用户勾选该复选框时，将所有行的选中状态都改变。我们还需要在每一行前添加一个复选框，用于单独选择行。

我们可以在模板中使用el-table-column组件来渲染复选框列和操作列。

下面是一个示例：

<template>
  <div>
    <el-table :data="tableData" ref="table">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' }
      ]
    }
  },
  methods: {
    handleDelete(row) {
      const index = this.tableData.indexOf(row)
      if (index !== -1) {
        this.tableData.splice(index, 1)
      }
    },
    handleBatchDelete() {
      const selection = this.$refs.table.selection
      selection.forEach(row => {
        const index = this.tableData.indexOf(row)
        if (index !== -1) {
          this.tableData.splice(index, 1)
        }
      })
    }
  }
}
</script>

需要注意的是，使用el-table组件批量删除行时，需要先获取到选中的行，可以使用this.$refs.table.selection来获取。