🐛 [Bug]: grid组件通过 row.edit 判断错误

iYathin commented 2 months ago

Version

3.11.1

Vue Version

3.3.7

Link to minimal reproduction

const tableData = reactive([])

...

const { data } = await opLicenceList({ productId: id }) tableData.splice(0, tableData.length, ...data )

Step to reproduce

tableData 为表格源数据，在编辑操作之后，重新请求数据覆盖 tableData 后，导致 row.edit 和 tableData[rowIndex].edit 状态不一致，后续通过 row.edit 判断错误

What is expected

No response

What is actually happening

No response

What is your project name

Yukisoft

Any additional comments (optional)

No response

Issues-translate-bot commented 2 months ago

Bot detected the issue body's language is not English, translate it automatically.

Title: 🐛 [Bug]:

gimmyhehe commented 2 months ago

@iYathin 感谢对TinyVue组件库的支持。但是issue中复现demo可提供信息太少，无法准确理解到您的问题。麻烦提供一下可以复现demo便于复现问题与定位~

Issues-translate-bot commented 2 months ago

Bot detected the issue body's language is not English, translate it automatically.

@iYathin Thanks for supporting the TinyVue component library. However, the reproduced demo in the issue provides too little information to accurately understand your problem. Please provide a reproducible demo to facilitate problem reproduction and location~

iYathin commented 2 months ago

<TinyGrid :data="tableData" @select-change="tableSelect">
        <TinyGridColumn type="selection" width="60" fixed="left" />
        <TinyGridColumn field="code" title="许可代码" :minWidth="140" fixed="left">
          <template #default="{ row }">
            <TinyInput
              v-if="row.edit"
              v-model="row.code"
              placeholder="请输⼊"
              :minWidth="200"
              fixed="left"
            />
            <template v-else>
              <c-copy :content="row.code">{{ row.code }}</c-copy>
            </template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn field="name" title="许可中文名称" :minWidth="200">
          <template #default="{ row }">
            <TinyInput v-if="row.edit" v-model="row.name" placeholder="请输⼊" />
            <template v-else>
              <c-copy :content="row.name">{{ row.name }}</c-copy>
            </template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn field="enName" title="许可英文名称" :minWidth="200">
          <template #default="{ row }">
            <TinyInput v-if="row.edit" v-model="row.enName" placeholder="请输⼊" />
            <template v-else>
              <c-copy :content="row.enName">{{ row.enName }}</c-copy>
            </template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn
          field="isFree"
          title="是否免费"
          :minWidth="80"
          align="center"
          header-algin="center"
        >
          <template #default="{ row, rowIndex }">
            <TinySelect
              v-if="row.edit"
              v-model="row.isFree"
              placeholder="请选择"
              @change="(v: yesOrNot) => isFreeChange(v, rowIndex)"
            >
              <TinyOption
                v-for="item in yesOrNotDict"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </TinySelect>
            <template v-else>
              <c-tag dict="yes_or_not" :value="row.isFree" />
            </template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn
          field="pubRentPrice"
          title="公有云租赁价格"
          align="right"
          header-algin="right"
          :minWidth="120"
        >
          <template #default="{ row }">
            <TinyNumeric
              v-if="row.edit"
              v-model="row.pubRentPrice"
              placeholder="请输⼊"
              :precision="2"
              :min="0"
              :disabled="row.isFree === 'Y'"
              :controls="false"
              style="display: inline-table"
            />
            <template v-else>
              <c-decimal :content="row.pubRentPrice" :std-decimal-digits="2" />
            </template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn
          field="pubBuyoutPrice"
          title="公有云买断价格"
          align="right"
          header-algin="right"
          :minWidth="120"
        >
          <template #default="{ row }">
            <TinyNumeric
              v-if="row.edit"
              v-model="row.pubBuyoutPrice"
              placeholder="请输⼊"
              :precision="2"
              :min="0"
              :disabled="row.isFree === 'Y'"
              :controls="false"
              style="display: inline-table"
            />
            <template v-else>
              <c-decimal :content="row.pubBuyoutPrice" :std-decimal-digits="2" />
            </template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn
          field="priRentPrice"
          title="私有云租赁价格"
          align="right"
          header-algin="right"
          :minWidth="120"
        >
          <template #default="{ row }">
            <TinyNumeric
              v-if="row.edit"
              v-model="row.priRentPrice"
              placeholder="请输⼊"
              :precision="2"
              :min="0"
              :disabled="row.isFree === 'Y'"
              :controls="false"
              style="display: inline-table"
            />
            <template v-else>
              <c-decimal :content="row.priRentPrice" :std-decimal-digits="2" />
            </template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn
          field="priBuyoutPrice"
          title="私有云买断价格"
          align="right"
          header-algin="right"
          :minWidth="120"
        >
          <template #default="{ row }">
            <TinyNumeric
              v-if="row.edit"
              v-model="row.priBuyoutPrice"
              placeholder="请输⼊"
              :precision="2"
              :min="0"
              :disabled="row.isFree === 'Y'"
              :controls="false"
              style="display: inline-table"
            />
            <template v-else>
              <c-decimal :content="row.priBuyoutPrice" :std-decimal-digits="2" />
            </template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn field="relyLicenceIds" title="依赖关系" minWidth="200">
          <template #default="{ row }">
            <TinySelect
              v-if="row.edit"
              v-model="row.relyLicenceIds"
              placeholder="请选择"
              :options="relyLicenceOptions"
              multiple
              collapse-tags
            />
            <c-tag-list
              v-else-if="!row.edit && row.relyLicenceNames"
              :values="row.relyLicenceNames"
              :max="2"
            />
          </template>
        </TinyGridColumn>
        <TinyGridColumn
          field="sort"
          title="排序"
          minWidth="80"
          align="center"
          header-algin="center"
        >
          <template #default="{ row }">
            <TinyNumeric
              v-if="row.edit"
              v-model="row.sort"
              placeholder="请输⼊"
              :precision="0"
              :controls="false"
              style="display: inline-table"
            />
            <template v-else>{{ row.sort }}</template>
          </template>
        </TinyGridColumn>
        <TinyGridColumn field="action" title="操作" width="90" fixed="right">
          <template #default="{ row, rowIndex }">
            <template v-if="!row.edit">
              <div class="link-button" @click.prevent="toEdit(row, rowIndex)">编辑</div>
              <TinyDivider direction="vertical" />
              <TinyPopConfirm
                custom-class="c-row-button-popconfirm"
                width="200"
                title="确认删除?"
                type="warning"
                trigger="click"
                @confirm="singleRemove(row)"
              >
                <template #reference>
                  <div class="link-button">删除</div>
                </template>
              </TinyPopConfirm>
            </template>
            <template v-else>
              <div class="link-button" @click.prevent="saveLicence(row)">保存</div>
              <TinyDivider direction="vertical" />
              <TinyPopConfirm
                custom-class="c-row-button-popconfirm"
                width="200"
                title="确认取消?"
                type="warning"
                trigger="click"
                @confirm="cancelEdit(rowIndex)"
              >
                <template #reference>
                  <div class="link-button">取消</div>
                </template>
              </TinyPopConfirm>
            </template>
          </template>
        </TinyGridColumn>
      </TinyGrid>

在 field=action 插槽中，row.edit和 tableData.rowIndex.edit 状态不一致，案例中使用 row.edit（默认为false）进行判断，当 tableData 使用 reactive 定义，手动修改 tableData[i].edit = ture 时，数据会存在差异，tableData[i].edit === true，但插槽中 row.edit 的值不会变，会是之前的状态。注：tableData 使用 ref 定义时，未发现问题

iYathin commented 2 months ago

edit.txt

Issues-translate-bot commented 2 months ago

Bot detected the issue body's language is not English, translate it automatically.

edit.txt

opentiny / tiny-vue