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

hmy666
  • 100
浙江

动态改变复选框的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>

image.png
image.png

回复
阅读 310
1 个回答
陟上晴明
  • 2.5k
浙江
✓ 已被采纳
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏