deetab
<h2>DeeTab 页签</h2>
<p>><font color=#2A75CE>定义： 参数中<font color=red>*</font>表示必填项，<font color=black>{key}</font>表示对象的键，<font color=black>{value}</font>表示对象的值；类型为array或object有子属性</font></p>
<h3>Attributes</h3>
<table>
<thead>
<tr>
<th style="text-align: center;">参数</th>
<th style="text-align: center;">说明</th>
<th style="text-align: center;">类型</th>
<th style="text-align: center;">可选择</th>
<th style="text-align: center;">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">tabs</td>
<td style="text-align: center;">页签列表</td>
<td style="text-align: center;">array</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">showSwipe</td>
<td style="text-align: center;">是否可收缩</td>
<td style="text-align: center;">boolean</td>
<td style="text-align: center;">true/false</td>
<td style="text-align: center;">false</td>
</tr>
</tbody>
</table>
<h3>Tabs Attributes</h3>
<table>
<thead>
<tr>
<th style="text-align: center;">参数</th>
<th style="text-align: center;">说明</th>
<th style="text-align: center;">类型</th>
<th style="text-align: center;">可选择</th>
<th style="text-align: center;">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">id</td>
<td style="text-align: center;">页签id，同时对应插槽名</td>
<td style="text-align: center;">string</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">name</td>
<td style="text-align: center;">页签名称</td>
<td style="text-align: center;">string</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">group</td>
<td style="text-align: center;">分组名称</td>
<td style="text-align: center;">string</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
</tbody>
</table>
<p>> <font color=#2A75CE>DeeStep默认包含back和next两个方法，控制当前步骤位置</p>
<pre><code>&lt;template&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;h2&gt;tabs demo&lt;/h2&gt;
&lt;dee-tab
:tabs=&quot;tabsArr&quot;
:show-swipe=&quot;true&quot;
:is-detail=&quot;false&quot;
:handler=&quot;tabHandler&quot;
&gt;
&lt;div slot=&quot;0&quot;&gt;
&lt;dee-table
:index-row=&quot;indexRow&quot;
:columns=&quot;tableColumns&quot;
:data=&quot;tableData&quot;
/&gt;
&lt;/div&gt;
&lt;div slot=&quot;1&quot;&gt;
参数设置
&lt;/div&gt;
&lt;div slot=&quot;2&quot;&gt;
详细信息
&lt;/div&gt;
&lt;/dee-tab&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import DeeTab from '@/components/DeeTab'
export default {
name: 'Tabs',
components: {
DeeTab
},
data() {
const that = this
return {
// Tab标签页名称
tabsArr: [
{
name: '基本设置',
id: '0'
},
{
name: '参数设置',
id: '1'
},
{
name: '详细信息',
id: '2'
}
],
// Tab标签页点击事件
tabHandler: {
'tab-click': function(tab) {
that.hanldeTab(tab)
}
},
// 测试数据
tableColumns: [
{
title: '编码',
width: '150',
key: 'number',
sortable: true
},
{
title: '名称',
key: 'name'
},
{
title: '型别',
key: 'type'
},
{
title: '使用单位',
key: 'unit'
}
],
indexRow: {
title: '序号',
align: 'center',
width: '70'
},
tableData: [
{ number: '1', name: '名称1', type: '型别1', unit: '使用单位1' },
{ number: '2', name: '名称2', type: '型别2', unit: '使用单位2' },
{ number: '3', name: '名称3', type: '型别3', unit: '使用单位3' },
{ number: '4', name: '名称4', type: '型别4', unit: '使用单位4' },
{ number: '5', name: '名称5', type: '型别5', unit: '使用单位5' }
]
}
},
watch: {
},
methods: {
hanldeTab(val) {
console.log(val)
}
}
}
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt;
&lt;/style&gt;
</code></pre>