强悍！Vue/element，助你解锁表格新增、插入、删除，单元格编辑新技能

2023-08-18 20:58:07

使用Vue/Element管理表格：动态新增、插入、删除、单元格编辑

什么是Vue/Element？

Vue和Element是两个流行的开源JavaScript库，可帮助您构建交互式Web应用程序。Vue是一个渐进式JavaScript框架，而Element是一个UI库，为Vue应用程序提供丰富的组件集。

表格管理

表格是Web应用程序中的常见组件，它们允许用户组织和显示数据。使用Vue/Element，您可以轻松地管理表格，添加动态功能，例如动态新增、插入、删除和单元格编辑。

动态新增一行

要动态新增一行，请在Vue组件中使用el-table组件，并在其中添加一个el-button组件作为“新增一行”按钮。在按钮的click事件中，使用JavaScript代码向表格数据数组添加一个新对象，该对象包含要显示在新增行中的数据。

<template>
  <el-table :data="tableData">
    <el-button type="primary" @click="addRow">新增一行</el-button>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          { name: 'John Doe', age: 30 },
          { name: 'Jane Doe', age: 25 }
        ]
      }
    },
    methods: {
      addRow() {
        this.tableData.push({ name: '', age: '' });
      }
    }
  }
</script>

插入一行

要插入一行，请使用与动态新增一行类似的方法。但是，在click事件中，您需要获取要插入行的索引。然后，使用JavaScript代码在表格数据数组中指定索引位置插入一个新对象。

<template>
  <el-table :data="tableData">
    <el-button type="primary" @click="insertRow(2)">插入行</el-button>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          { name: 'John Doe', age: 30 },
          { name: 'Jane Doe', age: 25 }
        ]
      }
    },
    methods: {
      insertRow(index) {
        this.tableData.splice(index, 0, { name: '', age: '' });
      }
    }
  }
</script>

删除一行

要删除一行，请使用el-button组件添加一个“删除一行”按钮。在按钮的click事件中，获取要删除行的索引，然后使用JavaScript代码从表格数据数组中删除指定索引位置的行。

<template>
  <el-table :data="tableData">
    <el-button type="danger" @click="deleteRow(index)">删除行</el-button>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          { name: 'John Doe', age: 30 },
          { name: 'Jane Doe', age: 25 }
        ]
      }
    },
    methods: {
      deleteRow(index) {
        this.tableData.splice(index, 1);
      }
    }
  }
</script>

单元格编辑

要启用单元格编辑，请在el-table组件中设置cell-type属性为“editable”。然后，在单元格中添加el-input组件，并将其value属性绑定到要编辑的单元格数据。在el-input组件的input事件中，将编辑后的值更新到表格数据数组中。

<template>
  <el-table :data="tableData" cell-type="editable">
    <el-table-column prop="name">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="age">
      <template slot-scope="scope">
        <el-input v-model="scope.row.age"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          { name: 'John Doe', age: 30 },
          { name: 'Jane Doe', age: 25 }
        ]
      }
    }
  }
</script>