在表格中循环插入表单

javascript 复制代码
<template>
  <div class="key">
    {{ruleForm.casesRange}}
    <el-form label-position="top" :model="ruleForm" ref='ruleForm'>
      <el-form-item label="这个表格怎么写">
        <el-table :data="tableData" border>
          <el-table-column prop="time" label="日期" width="180" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="type" label="是否登记(1=是,2=否)" width="180">
            <template slot-scope="scope">
              <el-form-item :prop="'casesRange.' + scope.$index + '.isRegister'" :rules="rules.change">
                <el-radio-group v-model="ruleForm.casesRange[scope.$index].isRegister">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="btn">按钮</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
        // 表单
        casesRange: [
          { isRegister: '' },
          { isRegister: '' },
          { isRegister: '' }
        ]
      },
      // 表格数据
      tableData: [
        {
          time: '2016-05-02',
          name: '王小虎'
        },
        {
          time: '2016-05-02',
          name: '王小虎'
        },
        {
          time: '2016-05-02',
          name: '王小虎'
        }
      ],
      rules: {
        change: [
          { required: true, message: '请输入', trigger: 'change' },
        ]
      }
    }
  },
  methods: {
    btn () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.key {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
}
</style>
相关推荐
ttod_qzstudio几秒前
Vue 3 中 toRaw 的取舍之道:以 Babylon.js 3D 开发为例
vue.js·babylonjs
Beginner x_u21 分钟前
JavaScript 原型、原型链与原型继承的核心机制解析
开发语言·javascript·原型模式·原型原型链
Mr Xu_32 分钟前
Vue3 + Element Plus 实战:App 版本管理后台——动态生成下载二维码与封装文件上传
前端·javascript·vue.js
比特森林探险记37 分钟前
Vue基础语法与响应式系统详解
前端·javascript·vue.js
2601_949847751 小时前
Flutter for OpenHarmony 剧本杀组队App实战:邀请好友功能实现
开发语言·javascript·flutter
FITA阿泽要努力1 小时前
Agent Engineer-Day 1 初始智能体与大语言模型基础
java·前端·javascript
zihan03211 小时前
element-plus, el-table 表头按照指定字段升降序的功能实现
前端·vue.js·状态模式
三翼鸟数字化技术团队1 小时前
watchEffect的两种错误用法
前端·javascript·vue.js
局外人LZ2 小时前
Decimal.js 完全指南:解决前端数值精度痛点的核心方案
开发语言·前端·javascript
飘若随风2 小时前
JS学习系列-01-什么是JS
开发语言·javascript·学习