你可以通过使用Vue和Element UI的组件来实现动态添加行、删除行、数据提交和回显功能。下面是一个简单的示例代码:

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="起始值" prop="q">
        <template slot-scope="scope">
          <el-input v-model="scope.row.q" :disabled="isDisabled(scope.$index, 'q')"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="结束值" prop="z">
        <template slot-scope="scope">
          <el-input v-model="scope.row.z" :disabled="isDisabled(scope.$index, 'z')"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="收取比例" prop="costRatio">
        <template slot-scope="scope">
          <el-input v-model="scope.row.costRatio" :disabled="isDisabled(scope.$index, 'costRatio')"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="removeRow(scope.$index)" :disabled="isDisabled(scope.$index, 'q')">删除</el-button>
        </template>
        <el-button size="small" @click="addRow">添加行</el-button>
        <el-button size="small" @click="submitData">提交</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { q: '', z: '', costRatio: '' }
      ]
    };
  },
  methods: {
    addRow() {
      this.tableData.push({ q: '', z: '', costRatio: '' });
    },
    removeRow(index) {
      this.tableData.splice(index, 1);
    },
    submitData() {
      // 提交数据的逻辑
    },
    isDisabled(index, prop) {
      const row = this.tableData[index];
      return !row.q || !row.z || !row.costRatio || prop === 'q' || prop === 'z' || prop === 'costRatio';
    }
  }
};
</script>

在上面的示例中,我们使用了el-table组件来展示数据表格,并通过v-model指令绑定每行的字段值。addRow方法用于动态添加行,removeRow方法用于删除行,submitData方法用于提交数据。isDisabled方法用于判断某个字段是否为空或是否为不允许提交的字段。

请注意,上述代码仅提供了基本的实现思路和示例,你需要根据具体需求进行修改和完善


原文地址: https://www.cveoy.top/t/topic/iPIA 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录