chenhaodong / mew-iview

Commit 8b530b1ce3604becf85dfb5728d457ffb0096861

Authored by 梁灏
1 parent fded311f

fixed #1342

Showing 3 changed files with 111 additions and 131 deletions   Show diff stats
Inline Side-by-side
examples/components/test.vue
  Show/Hide comments   View file @8b530b1
1 1 <template>
2   - <div>{{ row.name }}</div>
  2 + <Select v-model="model1" style="width:200px">
  3 + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
  4 + </Select>
3 5 </template>
4 6 <script>
5 7 export default {
6   - props: {
7   - row: Object
8   - },
9   - mounted () {
10   -// console.log(1);
11   - },
12   - beforeDestroy () {
13   -// console.log(2);
  8 + data () {
  9 + return {
  10 + cityList: [
  11 + {
  12 + value: 'beijing',
  13 + label: '北京市'
  14 + },
  15 + {
  16 + value: 'shanghai',
  17 + label: '上海市'
  18 + },
  19 + {
  20 + value: 'shenzhen',
  21 + label: '深圳市'
  22 + },
  23 + {
  24 + value: 'hangzhou',
  25 + label: '杭州市'
  26 + },
  27 + {
  28 + value: 'nanjing',
  29 + label: '南京市'
  30 + },
  31 + {
  32 + value: 'chongqing',
  33 + label: '重庆市'
  34 + }
  35 + ],
  36 + model1: ''
  37 + }
14 38 }
15 39 }
16 40 </script>
17 41 \ No newline at end of file
... ...
examples/routers/table.vue
  Show/Hide comments   View file @8b530b1
1 1 <template>
2   - <div>
3   - <div style="margin: 10px">
4   - 显示边框 <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
5   - 显示斑马纹 <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
6   - 显示索引 <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
7   - 显示多选框 <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
8   - 显示表头 <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
9   - 表格滚动 <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
10   - <br>
11   - <br>
12   - 表格尺寸
13   - <Radio-group v-model="tableSize" type="button">
14   - <Radio label="large">大</Radio>
15   - <Radio label="default">中</Radio>
16   - <Radio label="small">小</Radio>
17   - </Radio-group>
18   - </div>
19   - <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
20   - </div>
  2 + <Table width="550" border highlight-row @on-selection-change="change2" @on-current-change="change1" :columns="columns2" :data="data3"></Table>
21 3 </template>
22 4 <script>
23 5 export default {
24 6 data () {
25 7 return {
26   - tableData3: [
  8 + columns2: [
27 9 {
28   - name: '王小明',
29   - age: 18,
30   - address: '北京市朝阳区芍药居',
31   - date: '2016-10-03'
  10 + type: 'selection',
  11 + width: 60,
  12 + align: 'center'
32 13 },
33 14 {
34   - name: '张小刚',
35   - age: 24,
36   - address: '北京市海淀区西二旗',
37   - date: '2016-10-01'
  15 + title: '姓名',
  16 + key: 'name',
  17 + width: 100,
  18 + fixed: 'left'
38 19 },
39 20 {
40   - name: '李小红',
41   - age: 30,
42   - address: '上海市浦东新区世纪大道',
43   - date: '2016-10-02'
  21 + title: '年龄',
  22 + key: 'age',
  23 + width: 100
44 24 },
45 25 {
46   - name: '周小伟',
47   - age: 26,
48   - address: '深圳市南山区深南大道',
49   - date: '2016-10-04'
  26 + title: '省份',
  27 + key: 'province',
  28 + width: 100
  29 + },
  30 + {
  31 + title: '市区',
  32 + key: 'city',
  33 + width: 100
  34 + },
  35 + {
  36 + title: '地址',
  37 + key: 'address',
  38 + width: 200
50 39 },
51 40 {
  41 + title: '邮编',
  42 + key: 'zip',
  43 + width: 100
  44 + },
  45 + {
  46 + title: '操作',
  47 + key: 'action',
  48 + fixed: 'right',
  49 + width: 120,
  50 + render: (h, params) => {
  51 + return h('div', [
  52 + h('Button', {
  53 + props: {
  54 + type: 'text',
  55 + size: 'small'
  56 + }
  57 + }, '查看'),
  58 + h('Button', {
  59 + props: {
  60 + type: 'text',
  61 + size: 'small'
  62 + }
  63 + }, '编辑')
  64 + ]);
  65 + }
  66 + }
  67 + ],
  68 + data3: [
  69 + {
52 70 name: '王小明',
53 71 age: 18,
54 72 address: '北京市朝阳区芍药居',
55   - date: '2016-10-03'
  73 + province: '北京市',
  74 + city: '朝阳区',
  75 + zip: 100000
56 76 },
57 77 {
58 78 name: '张小刚',
59   - age: 24,
  79 + age: 25,
60 80 address: '北京市海淀区西二旗',
61   - date: '2016-10-01'
  81 + province: '北京市',
  82 + city: '海淀区',
  83 + zip: 100000
62 84 },
63 85 {
64 86 name: '李小红',
65 87 age: 30,
66 88 address: '上海市浦东新区世纪大道',
67   - date: '2016-10-02'
  89 + province: '上海市',
  90 + city: '浦东新区',
  91 + zip: 100000
68 92 },
69 93 {
70 94 name: '周小伟',
71 95 age: 26,
72 96 address: '深圳市南山区深南大道',
73   - date: '2016-10-04'
  97 + province: '广东',
  98 + city: '南山区',
  99 + zip: 100000
74 100 }
75   - ],
76   - showBorder: false,
77   - showStripe: false,
78   - showHeader: true,
79   - showIndex: true,
80   - showCheckbox: false,
81   - fixedHeader: false,
82   - tableSize: 'default'
  101 + ]
83 102 }
84 103 },
85   - computed: {
86   - tableColumns3 () {
87   - let columns = [];
88   - if (this.showCheckbox) {
89   - columns.push({
90   - type: 'selection',
91   - width: 60,
92   - align: 'center'
93   - })
94   - }
95   - if (this.showIndex) {
96   - columns.push({
97   - type: 'index',
98   - width: 60,
99   - align: 'center'
100   - })
101   - }
102   - columns.push({
103   - title: '日期',
104   - key: 'date',
105   - sortable: true
106   - });
107   - columns.push({
108   - title: '姓名',
109   - key: 'name'
110   - });
111   - columns.push({
112   - title: '年龄',
113   - key: 'age',
114   - sortable: true,
115   - filters: [
116   - {
117   - label: '大于25岁',
118   - value: 1
119   - },
120   - {
121   - label: '小于25岁',
122   - value: 2
123   - }
124   - ],
125   - filterMultiple: false,
126   - filterMethod (value, row) {
127   - if (value === 1) {
128   - return row.age > 25;
129   - } else if (value === 2) {
130   - return row.age < 25;
131   - }
132   - }
133   - });
134   - columns.push({
135   - title: '地址',
136   - key: 'address',
137   - filters: [
138   - {
139   - label: '北京',
140   - value: '北京'
141   - },
142   - {
143   - label: '上海',
144   - value: '上海'
145   - },
146   - {
147   - label: '深圳',
148   - value: '深圳'
149   - }
150   - ],
151   - filterMethod (value, row) {
152   - return row.address.indexOf(value) > -1;
153   - }
154   - });
155   - return columns;
  104 + methods: {
  105 + change1 (d, l) {
  106 +// console.log(d)
  107 +// console.log(l)
  108 + },
  109 + change2 (d, l) {
  110 + console.log(d);
  111 + console.log(l);
156 112 }
157 113 }
158 114 }
159   -</script>
160 115 \ No newline at end of file
  116 +</script>
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @8b530b1
... ... @@ -11,7 +11,7 @@
11 11 :prefix-cls="prefixCls"
12 12 @mouseenter.native.stop="handleMouseIn(row._index)"
13 13 @mouseleave.native.stop="handleMouseOut(row._index)"
14   - @click.native.stop="clickCurrentRow(row._index)"
  14 + @click.native="clickCurrentRow(row._index)"
15 15 @dblclick.native.stop="dblclickCurrentRow(row._index)">
16 16 <td v-for="column in columns" :class="alignCls(column, row)">
17 17 <Cell
... ...