JSFiddle - React, Tailwind, and code Playground

by zhouzhijun01

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-form
    ref="calendarForm"
    class="calendar-form"
    :model="calendarForm"
    label-width="120px"
    size="small"
   >
    <el-form-item label="奖品算法" prop="rewardtype">
      <el-radio-group v-model="calendarForm.rewardtype" class="algorithm-radio-group">
        <el-radio
          label="cumulative"
        >累计算法</el-radio>
        <el-radio label="ladder">阶梯算法</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      v-show="calendarForm.rewardtype === 'ladder'"
    >
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(ritem, index) in calendarForm.rewardlist"
        :key="index"
        :title="'报名人数第'+ (index + 1) + '名'"
        :name="index"
      >
        <el-row
          v-for="(litem, idx) in ritem.ladder"
          :key="litem.reach_num + idx"
          :gutter="10">
          <el-col :span="8">
            且学费总金额达
            <el-input
              type="number"
              style="width: 128px;"
              v-if="litem.type"
              v-model.number="litem.reach_num"
            >
              <i slot="prefix" class="el-input__icon">￥</i>
            </el-input>
          </el-col>
          <el-col :span="14">
            <el-radio-group v-model="litem.type">
              <el-radio label="fixed_money">固定金额</el-radio>
              <el-radio label="fixed_rate">总金额比例</el-radio>
            </el-radio-group>
            <el-input
              type="number"
              style="width: 128px;"
              v-if="litem.type === 'fixed_money'"
              :disabled="calendarForm.disableForm"
              v-model.number="litem.value"
            >
              <i slot="prefix" class="el-input__icon">￥</i>
            </el-input>
            <el-input
              type="number"
              v-if="litem.type === 'fixed_rate'"
             ...

CSS

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");

JavaScript

var Main = {
  data() {
    return {
      calendarForm: {
      	disableForm: false,
      	rewardtype: undefined,
        activeNames: [],
      	rewardlist: [{
        	ranking: 1,
          ladder: [{
          	reach_num: 100,
            type: "fixed_money",
            value: 10
          }]
        }]
      }
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')