JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>标注测评管理</el-breadcrumb-item>
                <el-breadcrumb-item>进行中任务</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="taskInfo"><p class="title">任务内容</p>
                <el-select v-model="taskId" placeholder="请选择任务" @change="onChangeTask">
                    <el-option  v-for="item in taskList" :key="item.taskId" 
                    :label="item.taskName" :value="item.taskId" ></el-option>
                </el-select> 
            </div>
            <div class="taskInfo"><p class="title">总标注数</p>
                <p class="taskContent" >{{taskItem.markCount}}</p>
            </div>
            <div class="taskInfo"><p class="title">当前需标注数</p>
                <p class="taskContent">{{taskItem.needMarkCount}}</p>
            </div>
            <div class="taskInfo"><p class="title">已标注数</p>
                <p class="taskContent">{{taskItem.finishMarkCount}}</p>
            </div>
            <div class="taskInfo"><p class="title">预计开始时间</p>
                <p class="taskContent">{{taskItem.predictStartTime}}</p>
            </div>
            <div class="taskInfo"><p class="title">预计结束时间</p>
                <p class="taskContent">{{taskItem.predictEndTime}}</p>
            </div>
            <div class="taskInfo"><p class="title">外包侧负责人</p>
                <p class="taskContent">{{taskItem.subcontractor + ""}}</p>
            </div>
             <div class="taskInfo"><p class="title">任务下达人</p>
                <p class="taskContent">{{taskItem.assignor + ""}}</p>
            </div>
            <el-table :data="values" border >
                <el-table-column type="index" width="55px"></el-table-column>
                <el-table-column v-for="(item, index)...

SCSS

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

Babel + JSX

var Main = {
    data() {
      return {
         userId:"",
            taskList: [],
            taskId:null,
            taskItem: {},
            totalRecord:0,
            totalCount: 0,
            pageSize: 10, 
            currentPage:1,
            // values:[],
            // fieldList: [],
            options:{},
            markValues:[],
            markResult:[],
            radio:{},
            values:[{
                field0:"大菜馆",
                field1:"鲁大菜馆",
                field2:"是",
                field3:"一",
            }, {
                field0:"大菜馆",
                field1:"鲁大菜馆",
                field2:"是",
                field3:"一",
            }],
            fieldList: [{
                fieldName:"字段一",
                fieldType: 1,
                optionType: 0,
                optionValue:null
            },{
                fieldName:"字段二",
                fieldType: 1,
                optionType: 0,
                optionValue:null
            }, {
                fieldName:"字段三",
                fieldType: 2,
                optionType: 1,
                optionValue: "是~否",
            },{
                fieldName:"字段四",
                fieldType: 2,
                optionType: 2,
                optionValue: "一~二~三",
            },{
                fieldName:"字段五",
                fieldType: 2,
                optionType: 3,
                optionValue: "一~二~三~四",
            },{
                fieldName:"字段六",
                fieldType: 2,
                optionType: 4,
                optionValue: null,
            },]
      }
    },
     mounted() {
        // this.requestTaskData()
        this.initData()
    },
    methods: {
      edit() {
        
      },
      initData() {
            for(var i = 0; i < this.fieldList.length; i ++) {
                this.markValues.push({})
                if(this.fieldList[i].fieldType != 1) {
                    //将配置现象从字符串分割成数组
                   ...