226 lines
6.0 KiB
JavaScript
226 lines
6.0 KiB
JavaScript
import ZkSwitch from './Switch.vue.js';
|
|
|
|
export default {
|
|
name: 'VG',
|
|
components: {
|
|
ZkSwitch,
|
|
},
|
|
data() {
|
|
return {
|
|
props: {
|
|
stripe: false,
|
|
border: false,
|
|
showHeader: true,
|
|
showSummary: false,
|
|
showRowHover: true,
|
|
showIndex: false,
|
|
treeType: true,
|
|
isFold: true,
|
|
expandType: false,
|
|
selectionType: false,
|
|
},
|
|
data: [
|
|
{
|
|
name: 'Jack',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
children: [
|
|
{
|
|
name: 'Ashley',
|
|
sex: 'female',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
children: [
|
|
{
|
|
name: 'Ashley',
|
|
sex: 'female',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
},
|
|
{
|
|
name: 'Taki',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
children: [
|
|
{
|
|
name: 'Ashley',
|
|
sex: 'female',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
},
|
|
{
|
|
name: 'Taki',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
children: [
|
|
{
|
|
name: 'Ashley',
|
|
sex: 'female',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
},
|
|
{
|
|
name: 'Taki',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'Taki',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'Tom',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
children: [
|
|
{
|
|
name: 'Ashley',
|
|
sex: 'female',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
children: [
|
|
{
|
|
name: 'Ashley',
|
|
sex: 'female',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
},
|
|
{
|
|
name: 'Taki',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'Taki',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
children: [
|
|
{
|
|
name: 'Ashley',
|
|
sex: 'female',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
},
|
|
{
|
|
name: 'Taki',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'Tom',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
},
|
|
{
|
|
name: 'Tom',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
children: [
|
|
{
|
|
name: 'Ashley',
|
|
sex: 'female',
|
|
likes: ['football', 'basketball'],
|
|
score: 20,
|
|
},
|
|
{
|
|
name: 'Taki',
|
|
sex: 'male',
|
|
likes: ['football', 'basketball'],
|
|
score: 10,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
label: 'name',
|
|
prop: 'name',
|
|
width: '400px',
|
|
},
|
|
{
|
|
label: 'sex',
|
|
prop: 'sex',
|
|
minWidth: '50px',
|
|
},
|
|
{
|
|
label: 'score',
|
|
prop: 'score',
|
|
},
|
|
{
|
|
label: 'likes',
|
|
prop: 'likes',
|
|
minWidth: '200px',
|
|
type: 'template',
|
|
template: 'likes',
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
propList() {
|
|
return Object.keys(this.props).map(item => ({
|
|
name: item,
|
|
}));
|
|
},
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
template: `
|
|
<div id="example">
|
|
<ul class="switch-list">
|
|
<li class="switch-item" v-for="item in propList">
|
|
<span>{{ item.name }}: </span>
|
|
<zk-switch v-model="props[item.name]"></zk-switch>
|
|
</li>
|
|
</ul>
|
|
<zk-table
|
|
ref="table"
|
|
sum-text="sum"
|
|
index-text="#"
|
|
:data="data"
|
|
:columns="columns"
|
|
:stripe="props.stripe"
|
|
:border="props.border"
|
|
:show-header="props.showHeader"
|
|
:show-summary="props.showSummary"
|
|
:show-row-hover="props.showRowHover"
|
|
:show-index="props.showIndex"
|
|
:tree-type="props.treeType"
|
|
:is-fold="props.isFold"
|
|
:expand-type="props.expandType"
|
|
:selection-type="props.selectionType">
|
|
<template slot="$expand">
|
|
</template>
|
|
<template slot="likes">
|
|
</template>
|
|
</zk-table>
|
|
</div>
|
|
`
|
|
}; |