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