Commit a6fc94382c517e6e78441a30ecc7ea06e64e6f92
1 parent
713bd3d7
fixed #461
Showing
4 changed files
with
101 additions
and
55 deletions
Show diff stats
examples/routers/select.vue
| @@ -192,7 +192,7 @@ | @@ -192,7 +192,7 @@ | ||
| 192 | <!--</script>--> | 192 | <!--</script>--> |
| 193 | 193 | ||
| 194 | <template> | 194 | <template> |
| 195 | - <div> | 195 | + <div style="margin: 1000px 0 0 "> |
| 196 | <Select v-model="model1" style="width:200px"> | 196 | <Select v-model="model1" style="width:200px"> |
| 197 | <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option> | 197 | <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option> |
| 198 | </Select> | 198 | </Select> |
examples/routers/slider.vue
| 1 | <template> | 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 | <Slider v-model="value2" range></Slider> | 4 | <Slider v-model="value2" range></Slider> |
| 5 | <Slider v-model="value3" range disabled></Slider> | 5 | <Slider v-model="value3" range disabled></Slider> |
| 6 | {{ value1 }}{{value2}} | 6 | {{ value1 }}{{value2}} |
examples/routers/table.vue
| 1 | <template> | 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 | </template> | 10 | </template> |
| 4 | <script> | 11 | <script> |
| 5 | export default { | 12 | export default { |
| 6 | data () { | 13 | data () { |
| 7 | return { | 14 | return { |
| 8 | self: this, | 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 | render (row, column, index) { | 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 | methods: { | 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
| @@ -301,18 +301,21 @@ | @@ -301,18 +301,21 @@ | ||
| 301 | } | 301 | } |
| 302 | }, | 302 | }, |
| 303 | changeSinglePosition (newPos) { | 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 | }, |