iview table 普通表格樣式

iview table 普通表格樣式

https://run.iviewui.com/UvLFPMb0

 

<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>