这样写页面选中没有生效？

Question

这样写页面选中没有生效？

发布于
2024-01-31 美国

<div class="select-lier">
          <div class="selcer">共{{brandaddlist.length}}项</div>
          <el-button size="small" @click="allclick">全选</el-button>
          <el-button size="small" @click="allclicbtn">反选</el-button>
        </div>
        <div class="change-box">
          <div class="select-l" v-for="v,i in brandaddlist" :key="v.key">
            <div class="chang-sel">
              <div class="tyep-ore">{{v.key}}</div>
              <el-button size="small" @click="selectAll(v)">全选</el-button>
              <el-button size="small" @click-="invert(v)">反选</el-button>
            </div>
            <div class="check-box" v-for="item in v.list" :key="item.ID">
              <el-checkbox
                v-model="item.select"
                :label="item.AdminAccount"
                :checked="item.select==0?false:true"
                name="type"
                @change="clickcheckbox(item)"
              />
            </div>
          </div>
        </div>

const allclick = async () => {
        await nextTick();
        brandaddlist.value.forEach((v) => {
          v.list.forEach((item) => {
            item.select = 1;
          });
        });
        console.log(brandaddlist.value);
      }; 这样写页面选中没有生效

这样写页面选中没有生效

vue.js element-plus javascript

阅读 934

AI BotBETA

这段代码中的问题在于v.list.forEach((item) => { item.select = 1; });。这一行试图直接修改item.select的值，但是实际上并未成功。这是因为item在这里是原始数据，而不是响应式引用。

Vue 3 的 Composition API（比如 ref 和 reactive）提供了一种方式来创建响应式的数据。在你的代码中，你需要在数据被创建时使用这些函数。

你可以尝试将你的代码修改为以下形式：

import { ref, nextTick } from 'vue';

export default {
  setup() {
    const brandaddlist = ref([
      // 你的初始数据
    ]);
    const allclick = async () => {
      await nextTick();
      brandaddlist.value.forEach((v) => {
        v.list.forEach((item) => {
          if (!item.select) item.select = ref(0); // 确保每个 item.select 都是响应式的
          item.select.value = 1; // 修改响应式引用的值
        });
      });
      console.log(brandaddlist.value);
    };
    return { allclick };
  }
}

注意，我在这里添加了 ref(0) 来确保 item.select 是一个响应式引用。然后我使用 .value 来访问和设置这个引用的值。这样，当你修改 item.select.value 时，Vue 将知道这个值已经改变，并相应地更新 DOM。

1 个回答

得票最新

XiongMiao

6391515

发布于
2024-02-01 云南

checkbox是取得v-model的值 check只是给了个默认值
你这里用的1为选中 0为未选中设置下面这两个属性就行
https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5...