If you add check boxes and filters to el-table, there will be conflicts. How to solve them?

problem description

use element-ui to create a table, use the multi-selection function and the filter function in the table, and find that the two functions conflict, and the check box of the filter cannot be multiple-selected. I would like to ask the gods, how should I write these two functions in the table at the same time? Thank you here!

related codes

<script>
export default {
  data() {
    return {
        tableData5: [{
          date: "2016-05-02",
          name: "",
          address: " 1518 ",
          tag: ""
        }, {
          date: "2016-05-04",
          name: "",
          address: " 1517 ",
          tag: ""
        }, {
          date: "2016-05-01",
          name: "",
          address: " 1519 ",
          tag: ""
        }, {
          date: "2016-05-03",
          name: "",
          address: " 1516 ",
          tag: ""
        }],
      multipleSelection: [],
      dialogTableVisible: false,  
    };
  },
 methods: {
    filterTag(value, row) {
        return row.tag === value;
      },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
}
}
</script>

functions you want to achieve

the function I want to achieve is to operate in the table. Click the check box to select all or freely any row in the table, and use the filter to select the desired row.
the problem now is that the error is reported by the run, and the filter becomes unable to select more than one filter.


use three items without filter


this problem is solved, seek privacy

Menu