diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md index 4c88e97d1..d8ac22d1e 100644 --- a/examples/docs/en-US/tabs.md +++ b/examples/docs/en-US/tabs.md @@ -2,13 +2,7 @@ export default { data() { return { - activeName: 'first', - tabs: [ - {label: 'User', content: '', name: 'first'}, - {label: 'Config', content: '', name: 'second'}, - {label: 'Role', content: '', name: 'third'}, - {label: 'Task', content: '', name: 'last'} - ] + activeName: 'first' } }, methods: { @@ -35,20 +29,17 @@ Basic and concise tabs. ```html <template> <el-tabs :active-name="activeName"> - <el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name">{{tab.content}}</el-tab-pane> - </el-tabs> + <el-tab-pane label="User" name="first">User</el-tab-pane> + <el-tab-pane label="Config" name="second">Config</el-tab-pane> + <el-tab-pane label="Role" name="third">Role</el-tab-pane> + <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> + </el-tabs> </template> <script> export default { data() { return { - activeName: 'first', - tabs: [ - {label: 'User', content: '', name: 'first'}, - {label: 'Config', content: '', name: 'second'}, - {label: 'Role', content: '', name: 'third'}, - {label: 'Task', content: '', name: 'last'} - ] + activeName: 'first' }; } }; @@ -65,10 +56,10 @@ Tabs styled as cards. ```html <template> <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove"> - <el-tab-pane label="User"></el-tab-pane> - <el-tab-pane label="Config"></el-tab-pane> - <el-tab-pane label="Role"></el-tab-pane> - <el-tab-pane label="Task"></el-tab-pane> + <el-tab-pane label="User">User</el-tab-pane> + <el-tab-pane label="Config">Config</el-tab-pane> + <el-tab-pane label="Role">Role</el-tab-pane> + <el-tab-pane label="Task">Task</el-tab-pane> </el-tabs> </template> <script> @@ -95,10 +86,10 @@ Closable tabs. ```html <template> <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove"> - <el-tab-pane label="User"></el-tab-pane> - <el-tab-pane label="Config"></el-tab-pane> - <el-tab-pane label="Role"></el-tab-pane> - <el-tab-pane label="Task"></el-tab-pane> + <el-tab-pane label="User">User</el-tab-pane> + <el-tab-pane label="Config">Config</el-tab-pane> + <el-tab-pane label="Role">Role</el-tab-pane> + <el-tab-pane label="Task">Task</el-tab-pane> </el-tabs> </template> <script> @@ -125,10 +116,10 @@ Border card tabs. ```html <el-tabs type="border-card"> - <el-tab-pane label="User"></el-tab-pane> - <el-tab-pane label="Config"></el-tab-pane> - <el-tab-pane label="Role"></el-tab-pane> - <el-tab-pane label="Task"></el-tab-pane> + <el-tab-pane label="User">User</el-tab-pane> + <el-tab-pane label="Config">Config</el-tab-pane> + <el-tab-pane label="Role">Role</el-tab-pane> + <el-tab-pane label="Task">Task</el-tab-pane> </el-tabs> ``` diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md index 4881e679f..df0b143cb 100644 --- a/examples/docs/zh-CN/tabs.md +++ b/examples/docs/zh-CN/tabs.md @@ -2,13 +2,7 @@ export default { data() { return { - activeName: 'first', - tabs: [ - {label: '用户管理', content: '', name: 'first'}, - {label: '配置管理', content: '', name: 'second'}, - {label: '角色管理', content: '', name: 'third'}, - {label: '定时任务补偿', content: '', name: 'last'} - ] + activeName: 'first' } }, methods: { @@ -33,20 +27,17 @@ ```html <template> <el-tabs :active-name="activeName"> - <el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name">{{tab.content}}</el-tab-pane> + <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> + <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> + <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> + <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> </el-tabs> </template> <script> export default { data() { return { - activeName: 'first', - tabs: [ - {label: '用户管理', content: '', name: 'first'}, - {label: '配置管理', content: '', name: 'second'}, - {label: '角色管理', content: '', name: 'third'}, - {label: '定时任务补偿', content: '', name: 'last'} - ] + activeName: 'first' }; } }; @@ -63,10 +54,10 @@ ```html <template> <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove"> - <el-tab-pane label="用户管理"></el-tab-pane> - <el-tab-pane label="配置管理"></el-tab-pane> - <el-tab-pane label="角色管理"></el-tab-pane> - <el-tab-pane label="定时任务补偿"></el-tab-pane> + <el-tab-pane label="用户管理">用户管理</el-tab-pane> + <el-tab-pane label="配置管理">配置管理</el-tab-pane> + <el-tab-pane label="角色管理">角色管理</el-tab-pane> + <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> </el-tabs> </template> <script> @@ -93,10 +84,10 @@ ```html <template> <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove"> - <el-tab-pane label="用户管理"></el-tab-pane> - <el-tab-pane label="配置管理"></el-tab-pane> - <el-tab-pane label="角色管理"></el-tab-pane> - <el-tab-pane label="定时任务补偿"></el-tab-pane> + <el-tab-pane label="用户管理">用户管理</el-tab-pane> + <el-tab-pane label="配置管理">配置管理</el-tab-pane> + <el-tab-pane label="角色管理">角色管理</el-tab-pane> + <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> </el-tabs> </template> <script> @@ -121,10 +112,10 @@ :::demo 将`type`设置为`border-card`。 ```html <el-tabs type="border-card"> - <el-tab-pane label="用户管理"></el-tab-pane> - <el-tab-pane label="配置管理"></el-tab-pane> - <el-tab-pane label="角色管理"></el-tab-pane> - <el-tab-pane label="定时任务补偿"></el-tab-pane> + <el-tab-pane label="用户管理">用户管理</el-tab-pane> + <el-tab-pane label="配置管理">配置管理</el-tab-pane> + <el-tab-pane label="角色管理">角色管理</el-tab-pane> + <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> </el-tabs> ``` :::