为什么复选框的值改变了,它不会动态勾选呢?

作者站长头像
站长
· 阅读数 19

动态改变复选框的checked,element-ui的复选框不会改变吗?为什么看了一下:属性是v-model才会生效,打扰了

<template>
  <div class="home">
    <button @click="fx">反选</button>
    <div>{{ tableData1[0].isChoose }}</div>
    <div>
      <el-checkbox
        :checked="tableData1[0].isChoose"
        label="复选框"
      ></el-checkbox>
    </div>
    <el-table :data="tableData1" height="250" border style="width: 100%">
      <el-table-column
        label="选择"
        width="80"
        align="center"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-checkbox
            @change="handleCheckBoxClick(scope.row)"
            :checked="scope.row.isChoose"
            label=""
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="isChoose" label="选中" width="180">
        <template #default="scope">
          <span>{{ scope.row.isChoose }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" width="1500" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  data() {
    return {
      tableData1: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isChoose: false,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isChoose: false,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isChoose: false,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isChoose: false,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isChoose: false,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isChoose: false,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isChoose: false,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    fx() {
      this.tableData1 = this.tableData1.filter((v) => {
        v.isChoose = !v.isChoose;
        return v;
      });

      console.log("反选:", this.tableData1);
    },
  },
  components: {
    HelloWorld,
  },
};
</script>

为什么复选框的值改变了,它不会动态勾选呢?为什么复选框的值改变了,它不会动态勾选呢?

回复
1个回答
avatar
test
2024-07-20
this.tableData1 = this.tableData1.filter((v) => {
// 修改为
this.tableData1 = this.tableData1.map((v) => {

这样就好了。

建议看一下 filtermap 各自的用途。

Array.prototype.filter() - JavaScript | MDNArray.prototype.map() - JavaScript | MDN

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容