vue2封装的表格组件问题？

• Z时代
• 2024-03-12
• 分类：IT

vue"><template>
    <div class="table-container">
        <el-table
            :size="config.tableSize"
            :height="config.tableHeight"
            :data="data"
            :border="setBorder"
            v-bind="$attrs"
            row-key="id"
            stripe
            style="width: 100%"
            v-loading="config.loading"
            @selection-change="onSelectionChange"
            @row-click="rowClick"
        >
            <el-table-column type="selection" :reserve-selection="true" width="30" v-if="config.isSelection" />
            <el-table-column
                v-for="(item, index) in setHeader"
                :key="index"
                show-overflow-tooltip
                :prop="item.key"
                :width="item.colWidth"
                :label="item.title"
            >
                <template #default="scope">
                    <template v-if="item.type === 'communicationLevel'">
                        {{ scope.row[item.key] === 0 ? '信息' : '' }}
                    </template>
                    <template v-else-if="item.type === 'src_ip'">
                        <span style="display: flex;">
                            <span>
                                <i class="iconfont icon-neiwang plagIcon" title="内网/其它" style="color: #1677ff;font-size: 16px;" />
                            </span>
                            <span> {{ scope.row[item.key] }}</span>
                        </span>
                    </template>
                    <template v-else-if="item.type === 'dest_ip'">
                        <span style="display: flex;">
                            <span v-if="!scope.row.dest_geo" style="display: inline-block;width:18.66px !important;height:23px !important;">
                                <i class="iconfont icon-neiwang plagIcon" title="内网/其它" style="color: #1677ff;font-size: 16px;" />
                            </span>
                            <span v-else :class="`fi fi-${scope.row.dest_geo.toLowerCase()}`" :title="scope.row.dest_geo_cn" class="plagIcon"></span>
                            <span style="width:12.5rem"> {{ scope.row[item.key] }}</span>
                        </span>
                    </template>
                    <template v-else-if="item.type === 'down'">
                        <el-icon :size="14" color="#91cc75" style="vertical-align: middle;"><Bottom /></el-icon>
                        <span :style="{color: '#91cc75'}">{{ bytesToSize(Number(scope.row[item.key])) }}</span>
                    </template>
                    <template v-else-if="item.type === 'tunnel_type'">
                        <el-tag v-for="(item,key) in scope.row.tunnel_type" :key="key" type="success" class="mx-1" effect="dark" size="small" style="margin-right:1px" :style="{background: getColor(item), borderColor:getColor(item)}">
                            {{ item }}
          </el-tag>
                    </template>
          <template v-else-if="item.type === 'num'">
                        <template v-if="scope.row.isEdit">
              <el-input v-model="form.num"></el-input>
            </template>
            <template v-else>
              {{ scope.row[item.key] }}
            </template>
                    </template>
                    <template v-else>
                        {{ scope.row[item.key] }}
                    </template>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="暂无数据" :image-size="config.tableSize === 'small' ? 80 : 200" />
            </template>
        </el-table>
        <div class="table-footer mt10" v-if="config.paginationDisabled">
            <el-pagination
                v-model:current-page="state.page.pageNum"
                v-model:page-size="state.page.pageSize"
                :small="config.paginationSize"
                :pager-count="5"
                :page-sizes="[10, 20, 30,50,100,150,200]"
                :total="config.total"
                layout="total, sizes, prev, pager, next, jumper"
                background
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

这是封装的子组件的表格组件
添加行是在父组件里面实现的，把值传给子组件
当我添加新的一行的时候，没有问题，添加两行的时候form.num修改其中一个的时候另外一个也跟着修改，如何解决这个问题

回答：

你所遇到的问题的关键应该是<el-input v-model="form.num"></el-input>这个v-model绑定的值指向的是同一个东西，根据你的描述看应该是你的添加行这个功能代码有问题。

应该是<el-input v-model="form.num"></el-input> 这个form.num换成 scope.row.num 这样就可以实现多个输入框的输入。

以上是 vue2封装的表格组件问题？ 的全部内容， 来源链接： utcz.com/p/934977.html