vue element-ui 表格动态添加行编辑行删除行

vue element-ui 表格动态添加行编辑行删除行

代码展示

<template>
  <div class="app-container home">
    <el-form ref="historyForm" :model="historyForm" size="small">
      <el-table
        :data="historyForm.tableData"
        style="width: 100%"
        class="list-table"
        size="mini"
        border>
        <el-table-column label="疾病名称" align="center" prop="diseaseName">
          <template slot-scope="scope">
            <el-input v-model="scope.row.diseaseName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="用药情况">
          <el-table-column label="药物名称" align="center" prop="drugName">
            <template slot-scope="scope">
              <el-input v-model="scope.row.drugName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="剂量" align="center" prop="dose">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dose"></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="addParamsSetting">新增</el-button>
            <el-button type="primary" size="small" @click.native.prevent="deleteRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="submitFun">提交</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      historyForm: {
        tableData: [{
          diseaseName: '',
          drugName: '',
          dose: '',
        }]
      },
    };
  },
  created() {

  },
  methods: {
    addList () {
      this.historyForm.tableData.push({
        diseaseName: '',
        drugName: '',
        dose: '',
      })
    },
    // 新增行
    addParamsSetting () {
      this.addList()
    },
    // 删除当前行
    deleteRow (index) {
      this.historyForm.tableData.splice(index, 1)
    },
    submitFun() {
      console.log(this.historyForm)
    },
  }
};
</script>

效果展示