如何结合蚂蚁设计复选框和表？

Question

我有一个看起来像这样的表：

它是从data数组填充的。如您所见，在该对象中有一个done字段。我想根据check-boxes字段的值来标记done。当然，我希望复选框值更改对象中的字段值。

这是我的代码：

<template>
  <a-table :columns="columns" :dataSource="data">
    <span slot="action">
      <a-checkbox :checked="checked" @click="onChange"> </a-checkbox>
    </span>
  </a-table>
</template>

<script>
const columns = [
  {
    title: "Student",
    dataIndex: "Student",
    key: "Student"
  },
  {
    title: "Action",
    key: "action",
    width: "1%",
    scopedSlots: { customRender: "action" }
  }
];

const data = [
  {
    key: "1",
    Student: "John Brown",
    done: false
  },
  {
    key: "2",
    Student: "John Brown",
    done: true
  },
  {
    key: "3",
    Student: "John Brown",
    done: false
  },
  {
    key: "4",
    Student: "John Brown",
    done: true
  }
];

export default {
  data() {
    return {
      data,
      columns,
      checked: false
    };
  },
  methods: {
    onChange(e) {
      this.checked = e.target.checked;
    },
    toggleChecked() {
      this.checked = !this.checked;
    }
  }
};
</script>

Answer 1

根据Ant Table，您需要使用slot-scope="text, record"来出价<a-checkbox >中的值。如下所示

<a-checkbox :checked="record.done" @click="onChange(record)"></a-checkbox>

您可以在此处查看codesandbox的示例。

---

代码段

<template>
  <a-table :columns="columns" :dataSource="data">
    <span slot="action" slot-scope="record">
      <a-checkbox :checked="record.done" @click="onChange(record)"></a-checkbox>
    </span>
  </a-table>
</template>

<script>
const columns = [{
    title: "Student",
    dataIndex: "Student",
    key: "Student"
  },{
    title: "Action",
    key: "action",
    width: "1%",
    scopedSlots: { customRender: "action" }
  }],
  data = [
  { key: "1", Student: "John Brown", done: false },
  { key: "2", Student: "John Brown", done: true },
  { key: "3", Student: "John Brown", done: false },
  { key: "4", Student: "John Brown", done: true }
];

export default {
  name: "App",
  data() {
    return {
      data,
      columns
    };
  },
  methods: {
    onChange(record) {
      record.done = !record.done;
    }
  }
};
</script>