动态渲染el-table内输入框

<template>
  <el-form size="small" :disabled="isdisabled">
    <el-form-item>
      <template>
        <el-table ref="table" border :data="applayList" style="width: 100%">
          <el-table-column prop="wxdate" label="维修日期">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.date" :disabled="isdisabled" type="date" placeholder="年-月-日" value-format="yyyy-MM-dd"> </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="wxfy" label="维修费用">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fee" :disabled="isdisabled" placeholder="单行输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="note" label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.note" :disabled="isdisabled" placeholder="单行输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <i class="el-icon-circle-plus-outline" style="font-size: 25px" @click="applayaddRow(scope.$index,applayList)"></i>
              <i class="el-icon-remove-outline" style="font-size: 25px" @click="applaydeleteRow(scope.$index, applayList)" v-if="applayList.length > 1 && scope.$index > 0"></i>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-form-item>
    <el-button type="primary" @click="add"> 保存</el-button>
  </el-form>
</template>

<script>
export default {
  name: "CustomTable",
  data() {
    return {
      applayList: [
        {
          date: "",
          fee: "",
          note: "",
        },
      ],
      tableData1: [], //表单属性
      isdisabled: false,
    };
  },

  methods: {
    add() {
      console.log(this.applayList);
    },
    //添加表格里的行(数组，索引)
    //注意：这里的index通过el-table组件的slot-scope="scope"插槽获取到的index,如上23行的scope.$index就是index,然后通过splice向点击的这项后面添加
    applayaddRow(applayList, index) {
      applayList.splice(index + 1, 0, {
        date: "",
        fee: "",
        note: "",
      })
    },
    //删除表格里的行(申请状态)
    applaydeleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss"></style>