element ui dropdown 下拉菜单 有二级菜单

      <el-dropdown
          :hide-on-click="false"
          ref="dropdown"
          @command="closeDrop"
          trigger="click"
          class="ml-10 mr-10"
        >
          <el-button type="primary">
            数据<el-icon class="ml-10"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="item in menu" :key="item.title">
                <el-dropdown-item v-if="!item.childer" :command="item.value">
                  <span> {{ item.title }}</span>
                </el-dropdown-item>
                <el-dropdown-item v-else>
                  <el-dropdown
                    :visible-arrow="false"
                    @command="closeDrop"
                    placement="right-start"
                  >
                    {{ item.title }}
                    <template #dropdown>
                      <el-dropdown-menu :visible-arrow="false">
                        <template
                          v-for="items in item.childer"
                          :key="items.title"
                        >
                          <el-dropdown-item :command="items.value">{{
                            items.title
                          }}</el-dropdown-item>
                        </template>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

js部分

const menu = ref([
  {
    title: '1.计算附加项目费用 >',
    value: '1',
    childer: [
      {
        title: '按选定物业计算',
        value: '1-10',
      },
      {
        title: '1.全部附加费项目',
        value: '1-11',
      },
      {
        title: '2.选定附加费项目',
        value: '1-12',
      },
      {
        title: '按选定楼栋计算',
        value: '1-20',
      },
      {
        title: '1.全部附加费项目',
        value: '1-21',
      },
      {
        title: '2.选定附加费项目',
        value: '1-22',
      },
      {
        title: '按选定客户计算',
        value: '1-30',
      },
      {
        title: '1.全部附加费项目',
        value: '1-31',
      },
      {
        title: '2.选定附加费项目',
        value: '1-32',
      },
    ],
  },
  {
    title: '2.重新计算走表费用',
    value: '2',
  },
  {
    title: '3.用量数据导入 >',
    value: '3',
    childer: [
      {
        title: '从文件导入...',
        value: '3-1',
      },
      {
        title: '从智能表数据导入',
        value: '3-2',
      },
    ],
  },
  {
    title: '4.用量数据-导出文件',
    value: '4',
  },
  {
    title: '5.指定用量报警值',
    value: '5',
  },
  {
    title: '6.分摊计算..',
    value: '6',
  },
  {
    title: '7.更新上次抄表日期',
    value: '7',
  },
  {
    title: '8.更新本次抄表日期',
    value: '8',
  },
  {
    title: '9.校验总表与分表的数据',
    value: '9',
  },
]);
const dropdown = ref() as any;
const closeDrop = (command: any) => {
  console.log('aa', command);
};