<template>

  <table>

    <thead>

      <tr>

        <th>属性</th>

        <th>说明</th>

        <th>类型</th>

        <th>默认值</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>mode</td>

        <td>菜单类型，可选值为 <code>horizontal</code>（水平） 和 <code>vertical</code>（垂直）</td>

        <td>String</td>

        <td>vertical</td>

      </tr>

      <tr>

        <td>theme</td>

        <td>主题，可选值为 <code>light</code>、<code>dark</code>、<code>primary</code>，其中 primary 只适用于 <code>mode="horizontal"</code></td>

        <td>String</td>

        <td>light</td>

      </tr>

      <tr>

        <td>active-name</td>

        <td>激活菜单的 name 值</td>

        <td>String | Number</td>

        <td>-</td>

      </tr>

      <tr>

        <td>open-names</td>

        <td>展开的 Submenu 的 name 集合</td>

        <td>Array</td>

        <td>[]</td>

      </tr>

      <tr>

        <td>accordion</td>

        <td>是否开启手风琴模式，开启后每次至多展开一个子菜单</td>

        <td>Boolean</td>

        <td>false</td>

      </tr>

      <tr>

        <td>width</td>

        <td>导航菜单的宽度，只在 <code>mode="vertical"</code> 时有效，如果使用 <code>Col</code> 等布局，建议设置为 <code>auto</code></td>

        <td>String</td>

        <td>240px</td>

      </tr>

    </tbody>

  </table>

</template>

<style>

code {

  display: inline-block;

  background: #f7f7f7;

  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;

  margin: 0 3px;

  padding: 1px 5px;

  border-radius: 3px;

  color: #666;

  border: 1px solid #eee;

}

table {

  font-family: Consolas, Menlo, Courier, monospace;

  font-size: 12px;

  border-collapse: collapse;

  border-spacing: 0;

  empty-cells: show;

  border: 1px solid #e9e9e9;

  width: 100%;

  margin-bottom: 24px;

}

table th {

  background: #f7f7f7;

  white-space: nowrap;

  color: #5c6b77;

  font-weight: 600;

}

table td,

table th {

  border: 1px solid #e9e9e9;

  padding: 8px 16px;

  text-align: left;

}

</style>

<script>

export default {

  data () {

    return {

      index: 1,

      formDynamic: {

        items: [

          {

            value: '',

            index: 1,

            status: 1

          }

        ]

      }

    }

  },

  methods: {

    handleSubmit (name) {

      this.$refs[name].validate((valid) => {

        if (valid) {

          this.$Message.success('Success!');

        } else {

          this.$Message.error('Fail!');

        }

      })

    },

    handleReset (name) {

      this.$refs[name].resetFields();

    },

    handleAdd () {

      this.index++;

      this.formDynamic.items.push({

        value: '',

        index: this.index,

        status: 1

      });

    },

    handleRemove (index) {

      this.formDynamic.items[index].status = 0;

    }

  }

}

</script>