历经几个月，终于初步完成公司项目，vue2.x+antdesign1.x完成前端开发

这里说几个遇到的问题

1.有一个动态下拉列表，需求讨论了几次，从点击下拉时候获取对应数据，最后定下来是一次性获取然后渲染，那问题来了：
我结合 Menu 导航菜单+Checkbox 多选框，实现这种效果

业务需求：

1.初次加载时候默认选中第一组，若第一组有子列表，则选中第一组第一个；
2.当点击右侧剪头，下拉展开显示子列表，没有则不显示(但是可以点击)；
3.点击左侧全选时，选中当前父标题，并且全选其下所有子标题
4.单个反选子标题时候，父标题的全选状态改变(antd自带的状态可以直接改变)
5.父标题反选时取消全部子标题的选中
6.当检测到所有标题(父标题与子标题全部取消)全部取消选中时，重新选中第一个父标题的第一个子标题，没有则选中自己

整体需求其实不难，难点在于我对antd这个组件熟练度不够
问题1：我需要使用到Menu 的导航菜单效果，结合多选框属性进行结合使用

<a-menu mode="inline" :multiple="true" :default-open-keys="defaultOpenKey" style="width: 280px" @openChange="onOpenChange"
              @select="menuItem">
              <a-sub-menu v-for="(optionSub,index) in listData" :key="optionSub.orgList.dictValue" class="optionMsg">
                <span slot="title">
                  <!-- v-if="optionSub.orgList.isExpand" -->
                  <a-checkbox :indeterminate="optionSub.indeterminate" :checked="optionSub.checkAll" @change="onCheckAllChange($event,index)">
                  </a-checkbox>
                  <span>
                    {{optionSub.orgList.dictName}}（{{optionSub.orgList.count}}）
                  </span>
                </span>

                <!-- 子集菜单 -->
                <a-menu-item v-if="optionSub.userList.length" :key="optionSub.orgList.dictName">
                  <a-checkbox-group v-model="optionSub.checkedList" :options="optionSub.userList" @change="onChange($event,index)" />
                </a-menu-item>
              </a-sub-menu>
       </a-menu>

乍一看没问题对吧，问题来了，后端返回的数据肯定是不能直接用的，我以为，Checkbox多选可以直接引用就行了，但是查阅官方文档后，需要特定的格式

官方格式
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];

那我就只能通过一系列手段(map)来重新处理我想要的数据

虽然最后实现了，但是我有个问题始终没解决，就是渲染后的多选框结合导航菜单，我使用点击事件时只能拿到选中的的那一级的value值，我有个需求是拿到选中label值，我期间修改了key也不行，折腾了我好久，我最后又是通过一系列手段解决的-_-
,有知道的人可以指点一下！

2.表格问题
在使用表格的时候，有两个表格类型，不同的表格类型有不同的数据名

我要动态渲染表格，就必须配置不同的数据相应类型

//封装表格头部
let autColunmns = [
  {
    title: "作者名称",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "name" },
    ellipsis: true,
    width: 110,
    align: "center",
  },
  {
    title: "别名",
    dataIndex: "alias",
    key: "alias",
    scopedSlots: { customRender: "alias" },
    width: 110,
    ellipsis: true,
    align: "center",
  },
  {
    title: "字",
    dataIndex: "zi",
    key: "zi",
    scopedSlots: { customRender: "zi" },
    width: 140,
    ellipsis: true,
    align: "center",
  },
  {
    title: "号",
    dataIndex: "hao",
    key: "hao",
    scopedSlots: { customRender: "hao" },
    width: 100,
    ellipsis: true,
    align: "center",
  },
  {
    title: "朝代",
    dataIndex: "dynasty",
    key: "dynasty",
    scopedSlots: { customRender: "dynasty" },
    width: 100,
    ellipsis: true,
    align: "center",
  },
  {
    title: "民族族群",
    dataIndex: "nationality",
    key: "nationality",
    scopedSlots: { customRender: "nationality" },
    ellipsis: true,
    align: "center",
  },
  {
    title: "籍贯",
    dataIndex: "nativePlace",
    key: "nativePlace",
    scopedSlots: { customRender: "nativePlace" },
    ellipsis: true,
    align: "center",
  },
];

// 数据图片列表展示
export const showPictureColumns = (data) => {
  data = autColunmns;
  return data;
};

在使用页面进行判断后，使用相应的表格头部

<a-table v-if="data" :pagination="pagination" :columns="columns" :data-source="data" :rowKey="(record,index)=>{return index}"
        :customRow="details">
        <!-- 文献 -->
        <template slot="title" slot-scope="text,record">
          <span v-if="record">
            {{record.properties?record.properties.title?record.properties.title:"不详":record.ins.title?record.ins.title:"不详"}}
          </span>
        </template>
        <template slot="subjectCategory" slot-scope="text,record">
          <span v-if="record">
            {{record.properties?record.properties.subjectCategory?record.properties.subjectCategory:"不详":record.ins.subjectCategory?record.ins.subjectCategory:"不详"}}
          </span>
        </template>
        <template slot="creator" slot-scope="text,record">
          <span v-if="record">
            {{record.properties?record.properties.creator?record.properties.creator:"不详":record.ins.creator?record.ins.creator:"不详"}}
          </span>
        </template>
    </a-table>

由上面可知，我这只有两种表格类型，其实不太好，要是有三种或者多种，三元表达式就不行了，我后期肯定会对其进行优化，目前想的办法是对其内容进行封装，动态根据表头配置来渲染相应表格数据。

---

1.这里要记住的是想修改表头，就需要结合 scopedSlots对象和表格中的 template 配置结合使用。

2.表格点击事件

 <a-table v-if="data" :pagination="pagination" :columns="columns" :data-source="data" :rowKey="(record,index)=>{return index}"
        :customRow="details">  -->details

//表格相应数据详情
    details (record, index) {
      let detailId = {
        instanceId: record.instanceId
      }
      let that = this;  //保存this
      return {
        on: {
          click: function () {  //我这里做的是点击跳转
            that.$router.push({ name: that.toLink, query: { details: JSON.stringify(detailId), path: that.fromLink } })
          }
        }
      }
    }