美文网首页web 前端
element ui的table动态生成表头,动态新增一行,并且

element ui的table动态生成表头,动态新增一行,并且

作者: 萬wan事顺意 | 来源:发表于2020-05-29 16:49 被阅读0次
    image.png
    <el-table
                          :data="inputValueDate"
                          border
                          stripe
                          style="width: 100%;"
                        >
                          <el-table-column
                            v-for="(item1,index1) in item.optionsList"
                            :key="index1"
                            :label="item1.optionValue"
                            :property="item1.optionName"
                          >
                            <template slot-scope="scope">
                              <el-input
                                v-model="scope.row[scope.column.property]"
                                size="small"
                                style="width:100%"
                              ></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column label="操作" min-width="30%">
                            <template slot-scope="scope">
                              <span @click="deleteData1(scope.row,scope.$index)">
                                <a href="javascript:;">删除</a>
                              </span>
                            </template>
                          </el-table-column>
                        </el-table>
    

    表头的数据是这样的--包括label和props


    image.png

    最重要的代码是这部分

    <el-table-column
                            v-for="(item1,index1) in item.optionsList"
                            :key="index1"
                            :label="item1.optionValue"
                            :property="item1.optionName"
                          >
                            <template slot-scope="scope">
                              <el-input
                                v-model="scope.row[scope.column.property]"
                                size="small"
                                style="width:100%"
                              ></el-input>
                            </template>
                          </el-table-column>
    

    相关文章

      网友评论

        本文标题:element ui的table动态生成表头,动态新增一行,并且

        本文链接:https://www.haomeiwen.com/subject/rdhfzhtx.html