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

  • Z时代
  • 2024-03-15
  • 分类：IT

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

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

回答：

this.tableData1 = this.tableData1.filter((v) => {
// 修改为
this.tableData1 = this.tableData1.map((v) => {

这样就好了。

建议看一下 filter 和 map 各自的用途。

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

以上是 为什么复选框的值改变了，它不会动态勾选呢？ 的全部内容， 来源链接： utcz.com/p/932921.html

回到顶部