mirror of https://github.com/ElemeFE/element
support tab title renter funtion
parent
568df8058d
commit
34dbb01c1a
|
@ -142,4 +142,5 @@ Border card tabs.
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | title of the tab | string | — | — |
|
||||
| label-content | render function for tab title | Function(h) | - | - |
|
||||
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |
|
||||
|
|
|
@ -137,4 +137,5 @@
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选项卡标题 | string | — | — |
|
||||
| label-content | 选项卡的标题的渲染 Function | Function(h) | - | - |
|
||||
| name | 与选项卡 activeName 对应的标识符,表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1' |
|
||||
|
|
|
@ -3,10 +3,8 @@
|
|||
name: 'el-tab-pane',
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
label: String,
|
||||
labelContent: Function,
|
||||
name: String,
|
||||
closable: Boolean
|
||||
},
|
||||
|
|
|
@ -91,7 +91,7 @@
|
|||
const activeBar = !type
|
||||
? <div class="el-tabs__active-bar" style={barStyle}></div>
|
||||
: null;
|
||||
|
||||
|
||||
const tabs = this.$children.map((tab, index) => {
|
||||
let btnClose = h('span', {
|
||||
class: {
|
||||
|
@ -110,7 +110,7 @@
|
|||
refInFor: true,
|
||||
on: { click: (ev) => { handleTabClick(tab, ev); } }
|
||||
}, [
|
||||
tab.label,
|
||||
tab.labelContent ? tab.labelContent.call(this._renderProxy, h) : tab.label,
|
||||
tab.isClosable ? btnClose : null,
|
||||
index === 0 ? activeBar : null
|
||||
]);
|
||||
|
|
|
@ -4,7 +4,7 @@ Function.prototype.bind = require('function-bind');
|
|||
require('packages/theme-default/src/index.css');
|
||||
|
||||
// require all test files (files that ends with .spec.js)
|
||||
const testsContext = require.context('./specs', true, /\.spec$/);
|
||||
const testsContext = require.context('./specs', true, /tabs\.spec$/);
|
||||
testsContext.keys().forEach(testsContext);
|
||||
|
||||
// require all src files except main.js for coverage.
|
||||
|
|
|
@ -220,4 +220,25 @@ describe('Tabs', () => {
|
|||
});
|
||||
}, 100);
|
||||
});
|
||||
it('tab title render function', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-tabs ref="tabs" >
|
||||
<el-tab-pane :label-content="renderTitle">A</el-tab-pane>
|
||||
<el-tab-pane label="配置管理">B</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" ref="pane-click">C</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿">D</el-tab-pane>
|
||||
</el-tabs>
|
||||
`,
|
||||
methods: {
|
||||
renderTitle(h) {
|
||||
return <span>用户管理</span>;
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
vm.$nextTick(_ => {
|
||||
expect(vm.$el.querySelector('.el-tabs__item span').innerText).to.equal('用户管理');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue