ant-design-vue/components/vc-table/demo/dropdown.js

/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index';
import '../assets/index.less';
import Menu from '../../menu';
const Item = Menu.Item;
const Divider = Menu.Divider;
import DropDown from '../../dropdown';

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i,
    a: `a${i}`,
    b: `b${i}`,
    c: `c${i}`,
  });
}

export default {
  data() {
    this.filters = [];
    return {
      visible: false,
    };
  },
  methods: {
    handleVisibleChange(visible) {
      this.visible = visible;
    },

    handleSelect(selected) {
      this.filters.push(selected);
    },

    handleDeselect(key) {
      const index = this.filters.indexOf(key);
      if (index !== -1) {
        this.filters.splice(index, 1);
      }
    },

    confirmFilter() {
      console.log(this.filters.join(','));
      this.visible = false;
    },
  },

  render() {
    const menu = (
      <Menu
        style={{ width: '200px' }}
        multiple
        selectable
        onSelect={this.handleSelect}
        onDeselect={this.handleDeselect}
      >
        <Item key="1">one</Item>
        <Item key="2">two</Item>
        <Item key="3">three</Item>
        <Divider />
        <Item disabled>
          <button
            style={{
              cursor: 'pointer',
              color: '#000',
              pointerEvents: 'visible',
            }}
            onClick={this.confirmFilter}
          >
            确定
          </button>
        </Item>
      </Menu>
    );

    const columns = [
      {
        title: (
          <div>
            title1
            <DropDown
              trigger={['click']}
              onVisibleChange={this.handleVisibleChange}
              visible={this.visible}
            >
              <template slot="overlay">{menu}</template>
              <a href="#">filter</a>
            </DropDown>
          </div>
        ),
        key: 'a',
        dataIndex: 'a',
        width: 100,
      },
      { title: 'title2', key: 'b', dataIndex: 'b', width: 100 },
      { title: 'title3', key: 'c', dataIndex: 'c', width: 200 },
    ];

    return (
      <div>
        <h2>use dropdown</h2>
        <Table columns={columns} data={data} rowKey={record => record.key} />
      </div>
    );
  },
};