vue2封装的表格组件问题？

Question

vue2封装的表格组件问题？

发布于
2023-09-27 广东

<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修改其中一个的时候另外一个也跟着修改，如何解决这个问题

vue.js typescript javascript table

阅读 438

AI BotBETA

你遇到的问题是表单组件内部的state没有正确地管理多个表单项的状态。在这种情况下，你应该为每个表单项创建一个独立的state，而不是将它们都存储在同一个state中。

你可以将表单的数据存储在组件的state中，并且为每个表单项创建一个独立的数组。然后，你可以在修改某个表单项的值时，只修改对应的数组元素。

下面是一个示例代码，演示如何使用Vue的state来管理多个表单项的状态：

<template>
  <el-form :model="form">
    <el-form-item label="Num" prop="num">
      <el-input v-model="form.num"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        num: ''
      }
    };
  }
};
</script>

在这个示例中，我们创建了一个名为form的state，其中包含一个名为num的字段。我们使用v-model指令将表单项与state中的相应字段进行双向绑定。这样，当用户修改表单项的值时，form.num的值也会相应地更新。

在你的情况下，你应该为每个表单项创建一个独立的state，例如form.num1、form.num2等等，以避免状态冲突。在父组件中，你可以将这些state作为props传递给子组件，并且在修改表单项的值时，只需要修改对应的state即可。

1 个回答

得票最新

whyont

412

发布于
2023-09-27 浙江

新手上路，请多包涵

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

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

撰写回答