fixed #461

examples/routers/select.vue

@@ -192,7 +192,7 @@
 <!--</script>-->
 
 <template>
-    <div>
+    <div style="margin: 1000px 0 0 ">
         <Select v-model="model1" style="width:200px">
             <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
         </Select>

examples/routers/slider.vue

@@ -1,6 +1,6 @@
 <template>
-    <div style="margin: 100px;">
+    <div style="margin: 0 400px;">
-        <Slider v-model="value1" :step="5" show-input></Slider>
+        <Slider v-model="value1" show-input></Slider>
         <Slider v-model="value2" range></Slider>
         <Slider v-model="value3" range disabled></Slider>
         {{ value1 }}{{value2}}

examples/routers/table.vue

@@ -1,70 +1,113 @@
 <template>
-    <Table border :context="self" :columns="columns7" :data="data6"></Table>
+    <div>
+        <Table :context="self" :data="tableData1" :columns="tableColumns1" stripe></Table>
+        <div style="margin: 10px;overflow: hidden">
+            <div style="float: right;">
+                <Page :total="100" :current="1" @on-change="changePage"></Page>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
                 self: this,
-                columns7: [
+                tableData1: this.mockTableData1(),
+                tableColumns1: [
                     {
-                        title: '姓名',
+                        title: '名称',
-                        key: 'name',
+                        key: 'name'
+                    },
+                    {
+                        title: '状态',
+                        key: 'status',
+                        render (row) {
+                            const color = row.status == 1 ? 'blue' : row.status == 2 ? 'green' : 'red';
+                            const text = row.status == 1 ? '构建中' : row.status == 2 ? '构建完成' : '构建失败';
+                            return `<tag type="dot" color="${color}">${text}</tag>`;
+                        }
+                    },
+                    {
+                        title: '画像内容',
+                        key: 'portrayal',
                         render (row, column, index) {
-                            return `<div style="white-space:nowrap;"><Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker></div>`;
+                            return `<Poptip trigger="hover" title="${row.portrayal.length}个画像" placement="bottom">
+                                        <tag>${row.portrayal.length}</tag>
+                                        <div slot="content">
+                                            <ul><li v-for="item in tableData1[${index}].portrayal" style="text-align: center;padding: 4px">{{ item }}</li></ul>
+                                        </div>
+                                    </Poptip>`;
                         }
                     },
                     {
-                        title: '年龄',
+                        title: '选定人群数',
-                        key: 'age'
+                        key: 'people',
-                    },
-                    {
-                        title: '地址',
-                        key: 'address'
-                    },
-                    {
-                        title: '操作',
-                        key: 'action',
-                        width: 150,
-                        align: 'center',
                         render (row, column, index) {
-                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
+                            return `<Poptip trigger="hover" title="${row.people.length}个客群" placement="bottom">
+                                        <tag>${row.people.length}</tag>
+                                        <div slot="content">
+                                            <ul><li v-for="item in tableData1[${index}].people" style="text-align: center;padding: 4px">{{ item.n }}：{{ item.c }}人</li></ul>
+                                        </div>
+                                    </Poptip>`;
                         }
+                    },
+                    {
+                        title: '取样时段',
+                        key: 'time',
+                        render (row) {
+                            return `近${row.time}天`
                         }
-                ],
-                data6: [
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
                     },
                     {
-                        name: '张小刚',
+                        title: '更新时间',
-                        age: 25,
+                        key: 'update',
-                        address: '北京市海淀区西二旗'
+                        render (row, column, index) {
-                    },
+                            return `{{ formatDate(tableData1[${index}].update) }}`;
-                    {
+                        }
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
                     }
                 ]
             }
         },
         methods: {
-            show (index) {
+            mockTableData1 () {
-                this.$Modal.info({
+                let data = [];
-                    title: '用户信息',
+                for (let i = 0; i < 10; i++) {
-                    content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
+                    data.push({
-                })
+                        name: '商圈' + Math.floor(Math.random () * 100 + 1),
+                        status: Math.floor(Math.random () * 3 + 1),
+                        portrayal: ['城市渗透', '人群迁移', '消费指数', '生活指数', '娱乐指数'],
+                        people: [
+                            {
+                                n: '客群' + Math.floor(Math.random () * 100 + 1),
+                                c: Math.floor(Math.random () * 1000000 + 100000)
                             },
-            remove (index) {
+                            {
-                this.data6.splice(index, 1);
+                                n: '客群' + Math.floor(Math.random () * 100 + 1),
+                                c: Math.floor(Math.random () * 1000000 + 100000)
+                            },
+                            {
+                                n: '客群' + Math.floor(Math.random () * 100 + 1),
+                                c: Math.floor(Math.random () * 1000000 + 100000)
+                            }
+                        ],
+                        time: Math.floor(Math.random () * 7 + 1),
+                        update: new Date()
+                    })
+                }
+                return data;
+            },
+            formatDate (date) {
+                const y = date.getFullYear();
+                let m = date.getMonth() + 1;
+                m = m < 10 ? '0' + m : m;
+                let d = date.getDate();
+                d = d < 10 ? ('0' + d) : d;
+                return y + '-' + m + '-' + d;
+            },
+            changePage () {
+                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
+                this.tableData1 = this.mockTableData1();
             }
         }
     }

src/components/slider/slider.vue

@@ -301,7 +301,11 @@
                 }
             },
             changeSinglePosition (newPos) {
-                if (newPos >= 0 && (newPos <= 100)) {
+                if (newPos < 0) {
+                    newPos = 0;
+                } else if (newPos > 100) {
+                    newPos = 100;
+                }
                 const lengthPerStep = 100 / ((this.max - this.min) / this.step);
                 const steps = Math.round(newPos / lengthPerStep);
 
@@ -314,7 +318,6 @@
                         this.oldSingleValue = this.currentValue;
                     }
                 }
-                }
             },
             setSinglePosition (val) {
                 this.singlePosition = (val - this.min) / (this.max - this.min) * 100;