chenhaodong / mew-iview

Commit a6fc94382c517e6e78441a30ecc7ea06e64e6f92

Authored by 梁灏
1 parent 713bd3d7

fixed #461

Showing 4 changed files with 101 additions and 55 deletions   Show diff stats
Inline Side-by-side
examples/routers/select.vue
  Show/Hide comments   View file @a6fc943
... ... @@ -192,7 +192,7 @@
192 192 <!--</script>-->
193 193  
194 194 <template>
195   - <div>
  195 + <div style="margin: 1000px 0 0 ">
196 196 <Select v-model="model1" style="width:200px">
197 197 <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
198 198 </Select>
... ...
examples/routers/slider.vue
  Show/Hide comments   View file @a6fc943
1 1 <template>
2   - <div style="margin: 100px;">
3   - <Slider v-model="value1" :step="5" show-input></Slider>
  2 + <div style="margin: 0 400px;">
  3 + <Slider v-model="value1" show-input></Slider>
4 4 <Slider v-model="value2" range></Slider>
5 5 <Slider v-model="value3" range disabled></Slider>
6 6 {{ value1 }}{{value2}}
... ...
examples/routers/table.vue
  Show/Hide comments   View file @a6fc943
1 1 <template>
2   - <Table border :context="self" :columns="columns7" :data="data6"></Table>
  2 + <div>
  3 + <Table :context="self" :data="tableData1" :columns="tableColumns1" stripe></Table>
  4 + <div style="margin: 10px;overflow: hidden">
  5 + <div style="float: right;">
  6 + <Page :total="100" :current="1" @on-change="changePage"></Page>
  7 + </div>
  8 + </div>
  9 + </div>
3 10 </template>
4 11 <script>
5 12 export default {
6 13 data () {
7 14 return {
8 15 self: this,
9   - columns7: [
  16 + tableData1: this.mockTableData1(),
  17 + tableColumns1: [
10 18 {
11   - title: '姓名',
12   - key: 'name',
13   - render (row, column, index) {
14   - return `<div style="white-space:nowrap;"><Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker></div>`;
15   - }
16   - },
17   - {
18   - title: '年龄',
19   - key: 'age'
  19 + title: '名称',
  20 + key: 'name'
20 21 },
21 22 {
22   - title: '地址',
23   - key: 'address'
  23 + title: '状态',
  24 + key: 'status',
  25 + render (row) {
  26 + const color = row.status == 1 ? 'blue' : row.status == 2 ? 'green' : 'red';
  27 + const text = row.status == 1 ? '构建中' : row.status == 2 ? '构建完成' : '构建失败';
  28 + return `<tag type="dot" color="${color}">${text}</tag>`;
  29 + }
24 30 },
25 31 {
26   - title: '操作',
27   - key: 'action',
28   - width: 150,
29   - align: 'center',
  32 + title: '画像内容',
  33 + key: 'portrayal',
30 34 render (row, column, index) {
31   - return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
  35 + return `<Poptip trigger="hover" title="${row.portrayal.length}个画像" placement="bottom">
  36 + <tag>${row.portrayal.length}</tag>
  37 + <div slot="content">
  38 + <ul><li v-for="item in tableData1[${index}].portrayal" style="text-align: center;padding: 4px">{{ item }}</li></ul>
  39 + </div>
  40 + </Poptip>`;
32 41 }
33   - }
34   - ],
35   - data6: [
36   - {
37   - name: '王小明',
38   - age: 18,
39   - address: '北京市朝阳区芍药居'
40 42 },
41 43 {
42   - name: '张小刚',
43   - age: 25,
44   - address: '北京市海淀区西二旗'
  44 + title: '选定人群数',
  45 + key: 'people',
  46 + render (row, column, index) {
  47 + return `<Poptip trigger="hover" title="${row.people.length}个客群" placement="bottom">
  48 + <tag>${row.people.length}</tag>
  49 + <div slot="content">
  50 + <ul><li v-for="item in tableData1[${index}].people" style="text-align: center;padding: 4px">{{ item.n }}：{{ item.c }}人</li></ul>
  51 + </div>
  52 + </Poptip>`;
  53 + }
45 54 },
46 55 {
47   - name: '李小红',
48   - age: 30,
49   - address: '上海市浦东新区世纪大道'
  56 + title: '取样时段',
  57 + key: 'time',
  58 + render (row) {
  59 + return `近${row.time}天`
  60 + }
50 61 },
51 62 {
52   - name: '周小伟',
53   - age: 26,
54   - address: '深圳市南山区深南大道'
  63 + title: '更新时间',
  64 + key: 'update',
  65 + render (row, column, index) {
  66 + return `{{ formatDate(tableData1[${index}].update) }}`;
  67 + }
55 68 }
56 69 ]
57 70 }
58 71 },
59 72 methods: {
60   - show (index) {
61   - this.$Modal.info({
62   - title: '用户信息',
63   - content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
64   - })
  73 + mockTableData1 () {
  74 + let data = [];
  75 + for (let i = 0; i < 10; i++) {
  76 + data.push({
  77 + name: '商圈' + Math.floor(Math.random () * 100 + 1),
  78 + status: Math.floor(Math.random () * 3 + 1),
  79 + portrayal: ['城市渗透', '人群迁移', '消费指数', '生活指数', '娱乐指数'],
  80 + people: [
  81 + {
  82 + n: '客群' + Math.floor(Math.random () * 100 + 1),
  83 + c: Math.floor(Math.random () * 1000000 + 100000)
  84 + },
  85 + {
  86 + n: '客群' + Math.floor(Math.random () * 100 + 1),
  87 + c: Math.floor(Math.random () * 1000000 + 100000)
  88 + },
  89 + {
  90 + n: '客群' + Math.floor(Math.random () * 100 + 1),
  91 + c: Math.floor(Math.random () * 1000000 + 100000)
  92 + }
  93 + ],
  94 + time: Math.floor(Math.random () * 7 + 1),
  95 + update: new Date()
  96 + })
  97 + }
  98 + return data;
  99 + },
  100 + formatDate (date) {
  101 + const y = date.getFullYear();
  102 + let m = date.getMonth() + 1;
  103 + m = m < 10 ? '0' + m : m;
  104 + let d = date.getDate();
  105 + d = d < 10 ? ('0' + d) : d;
  106 + return y + '-' + m + '-' + d;
65 107 },
66   - remove (index) {
67   - this.data6.splice(index, 1);
  108 + changePage () {
  109 + // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
  110 + this.tableData1 = this.mockTableData1();
68 111 }
69 112 }
70 113 }
... ...
src/components/slider/slider.vue
  Show/Hide comments   View file @a6fc943
... ... @@ -301,18 +301,21 @@
301 301 }
302 302 },
303 303 changeSinglePosition (newPos) {
304   - if (newPos >= 0 && (newPos <= 100)) {
305   - const lengthPerStep = 100 / ((this.max - this.min) / this.step);
306   - const steps = Math.round(newPos / lengthPerStep);
  304 + if (newPos < 0) {
  305 + newPos = 0;
  306 + } else if (newPos > 100) {
  307 + newPos = 100;
  308 + }
  309 + const lengthPerStep = 100 / ((this.max - this.min) / this.step);
  310 + const steps = Math.round(newPos / lengthPerStep);
307 311  
308   - this.currentValue = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
309   - this.setSinglePosition(this.currentValue);
310   - if (!this.dragging) {
311   - if (this.currentValue !== this.oldSingleValue) {
312   - this.$emit('on-change', this.currentValue);
313   - this.dispatch('FormItem', 'on-form-change', this.currentValue);
314   - this.oldSingleValue = this.currentValue;
315   - }
  312 + this.currentValue = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
  313 + this.setSinglePosition(this.currentValue);
  314 + if (!this.dragging) {
  315 + if (this.currentValue !== this.oldSingleValue) {
  316 + this.$emit('on-change', this.currentValue);
  317 + this.dispatch('FormItem', 'on-form-change', this.currentValue);
  318 + this.oldSingleValue = this.currentValue;
316 319 }
317 320 }
318 321 },
... ...