Vue2 element-table 动态添加一行

发布时间 2023-10-26 13:57:27作者: 糯米白白

Vue2 element-table 动态添加一行

<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table :data="tableData" :height="fullHeight" border>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="subcompanyId" label="部门名称">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.postId"
            :disabled="scope.row.disableInput"
          >
            <el-option label="设计部" value="1234567890"></el-option>
            <el-option label="产品部" value="9876543210"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="postId" label="岗位名称">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.postId"
            :disabled="scope.row.disableInput"
          >
            <el-option label="经理" value="1234567890"></el-option>
            <el-option label="普通员工" value="9876543210"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="oaUserIds" label="姓名/手机号码">
        <template slot-scope="scope">
          <el-input
            :disabled="scope.row.disableInput"
            v-model="scope.row.oaUserIds"
          ></el-input>
        </template>
      </el-table-column>
 
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              icon="el-icon-edit"
              size="mini"
              :disabled="
                !scope.row.oaUserIds ||
                !scope.row.postId ||
                !scope.row.subcompanyId
              "
              @click="subrow(scope.row)"
              >提交</el-button
            >
            <el-button
              icon="el-icon-delete"
              size="mini"
              @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="searchForm.pageNum"
      :limit.sync="searchForm.pageSize"
      @pagination="getList"
    />
    <!-- 添加一行数据 -->
    <el-button
      type="primary"
      class="buttonAdd"
      icon="el-icon-plus"
      @click="addRow"
      >添加一行</el-button
    >
  </div>
</template>
 
 
 
<script>
export default {
  data() {
    return {
      total: 0,
      tableData: [], // 表格数据
      newRow: {}, // 新增的一行数据
      isDis: false,
      fullHeight: window.innerHeight - 222 + "px",
    };
  },
  mounted() {
  },
  methods: {
 
    addRow() {
      // 添加一行数据
      const newRow = {
        subcompanyId: undefined,
        postId: undefined,
        oaUserIds: undefined,
        disableInput: false,
      };
      this.tableData.push(newRow);
    },
 
    deleteRow(row) {
      // 删除行数据
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    },
  },
};
</script>

写了一个动态表格,点下面按钮,动态添加带输入框和选择框的一条数据