Selection Usage

Rows can be selectable by making first column as a selectable column.

selected items: {{selectedData.length}}
<n-advanced-table
  ref="table"
  :columns="columns"
  :data="data"
  :pagination="pagination"
  @on-selected-change="onSelectedChange"
>
</n-advanced-table>

const _columns = $this => {
  return [
    {
      type: "selection",
      disabled(params, index) {
        return params.row.name === "Edward King 3";
      }
    },
    {
      title: "Name",
      key: "name"
    },
    {
      title: "Age",
      key: "age"
    },
    {
      title: "Address",
      key: "address"
    }
  ];
};

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`
  });
}
export default {
  data() {
    return {
      data: data,
      columns: _columns(this),
      selectedData: []
    };
  },
  computed: {
    pagination() {
      return { total: this.data.length, limit: 10 };
    }
  },
  methods: {
    sendMail(rowData) {
      this.$NMessage.info("send mail to " + rowData.name);
    },
    onSelectedChange(selectedData) {
      this.selectedData = selectedData;
    }
  }
};

1.2 KiB Raw Blame History

Selection Usage

1.2 KiB

Raw Blame History