表格列添加下拉筛选

表格列添加下拉筛选 ant-design-vue之a-table

使用 columns 时，可以通过该属性配置支持 slot 的属性

 <a-table
    :columns="columns"
    :dataSource="table.items"
    :row-key="(record) => record.id"
    :row-selection="rowSelection"
    class="components-table-demo-nested"
    :pagination="false"
    expandRowByClick
    >
    <template slot="teachingGroupName">名称
        <a-select style="width: 120px" @change="handleChange">
        <a-select-option value="jack">
          Jack
        </a-select-option>
        <a-select-option value="lucy">
          Lucy
        </a-select-option>
        <a-select-option value="disabled" disabled>
          Disabled
        </a-select-option>
        <a-select-option value="Yiminghe">
          yiminghe
        </a-select-option>
        </a-select>
    </template>
</a-table>


const columns = [
  {
    // title: '分组名称',
    dataIndex: 'teachingGroupName',
    align: 'center',
    key: 'teachingGroupName',
    slots: { title: 'teachingGroupName' }
  }
]

实现效果