仿TAPD 缺陷状态流转编写UI,table 如何绑定子数据?

Vue.js

需求

 1、 状态为动态可配置
 2、本状态不可流转本状态

使用VUE2 尝试使用table 构造失败,请求有没有好的数据结构思路?

尝试实现

 <el-table :data="tableSettingData" style="width: 100%">
          <el-table-column prop="name" label="---" width="180">
            <template slot-scope="scope">
              <span>从【{{  scope.row.name}}】可流转到</span>
            </template>
          </el-table-column>

          <el-table-column v-for="item in tableSettingData" :label="item.name" :prop="item.name"   align="center"
            :key="item.name" >
            <template slot-scope="scope">
              <el-checkbox  v-model="scope.row.name" :name="scope.row.name"></el-checkbox>
            </template>
          </el-table-column>

        </el-table>

数据结构如下:

 tableSettingData: [
    {
        "name":"新的",
        "en_name":"new",
        "list":[
            {
                "name":"新的",
                "en_name":"new",
                "states":false
            },
            {
                "name":"接受",
                "en_name":"accept",
                "states":false
            },
            {
                "name":"已解决",
                "en_name":"resolved",
                "states":false
            }
        ]
    },
    {
        "name":"接受",
        "en_name":"accept",
        "list":[
            {
                "name":"新的",
                "en_name":"new",
                "states":false
            },
            {
                "name":"接受",
                "en_name":"accept",
                "states":false
            },
            {
                "name":"已解决",
                "en_name":"resolved",
                "states":false
            }
        ]
    },
    {
        "name":"已解决",
        "en_name":"resolved",
        "list":[
            {
                "name":"新的",
                "en_name":"new",
                "states":false
            },
            {
                "name":"接受",
                "en_name":"accept",
                "states":false
            },
            {
                "name":"已解决",
                "en_name":"resolved",
                "states":false
            }
        ]
    }
]

结果

防TAPD 缺陷状态流转编写UI,请求各位有没有好的思路?

在此地方如何绑定子数据?

<el-checkbox  v-model="scope.row.name" :name="scope.row.name"></el-checkbox> 
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!