Commit d509d2b2af0870b708805137e569ddd59d93c83d
1 parent
e3e8335f
fixed #192
fixed #192
Showing
4 changed files
with
56 additions
and
83 deletions
Show diff stats
src/components/select/select.vue
| @@ -479,7 +479,7 @@ | @@ -479,7 +479,7 @@ | ||
| 479 | this.query = query; | 479 | this.query = query; |
| 480 | } | 480 | } |
| 481 | }, | 481 | }, |
| 482 | - ready () { | 482 | + compiled () { |
| 483 | if (!this.multiple && this.filterable && this.model) { | 483 | if (!this.multiple && this.filterable && this.model) { |
| 484 | this.findChild((child) => { | 484 | this.findChild((child) => { |
| 485 | if (this.model === child.value) { | 485 | if (this.model === child.value) { |
src/styles/components/select.less
| @@ -9,7 +9,7 @@ | @@ -9,7 +9,7 @@ | ||
| 9 | vertical-align: middle; | 9 | vertical-align: middle; |
| 10 | color: @text-color; | 10 | color: @text-color; |
| 11 | font-size: @font-size-base; | 11 | font-size: @font-size-base; |
| 12 | - position: relative; | 12 | + //position: relative; |
| 13 | line-height: normal; | 13 | line-height: normal; |
| 14 | 14 | ||
| 15 | &-selection { | 15 | &-selection { |
| @@ -18,6 +18,7 @@ | @@ -18,6 +18,7 @@ | ||
| 18 | outline: none; | 18 | outline: none; |
| 19 | user-select: none; | 19 | user-select: none; |
| 20 | cursor: pointer; | 20 | cursor: pointer; |
| 21 | + position: relative; | ||
| 21 | 22 | ||
| 22 | background-color: #fff; | 23 | background-color: #fff; |
| 23 | border-radius: @btn-border-radius; | 24 | border-radius: @btn-border-radius; |
test/main.js
| @@ -5,10 +5,10 @@ import Vue from 'vue'; | @@ -5,10 +5,10 @@ import Vue from 'vue'; | ||
| 5 | import VueRouter from 'vue-router'; | 5 | import VueRouter from 'vue-router'; |
| 6 | import App from './app.vue'; | 6 | import App from './app.vue'; |
| 7 | import iView from '../src/index'; | 7 | import iView from '../src/index'; |
| 8 | -import locale from '../src/locale/lang/en-US'; | 8 | +// import locale from '../src/locale/lang/en-US'; |
| 9 | 9 | ||
| 10 | Vue.use(VueRouter); | 10 | Vue.use(VueRouter); |
| 11 | -Vue.use(iView, { locale }); | 11 | +Vue.use(iView); |
| 12 | 12 | ||
| 13 | // 开启debug模式 | 13 | // 开启debug模式 |
| 14 | Vue.config.debug = true; | 14 | Vue.config.debug = true; |
test/routers/table.vue
| 1 | -<style> | ||
| 2 | - .ivu-table .demo-table-info-row td{ | ||
| 3 | - background-color: #2db7f5; | ||
| 4 | - color: #fff; | ||
| 5 | - } | ||
| 6 | - .ivu-table .demo-table-error-row td{ | ||
| 7 | - background-color: #ff6600; | ||
| 8 | - color: #fff; | ||
| 9 | - } | ||
| 10 | - .ivu-table td.demo-table-info-column{ | ||
| 11 | - background-color: #2db7f5; | ||
| 12 | - color: #fff; | ||
| 13 | - } | ||
| 14 | - .ivu-table .demo-table-info-cell-name { | ||
| 15 | - background-color: #2db7f5; | ||
| 16 | - color: #fff; | ||
| 17 | - } | ||
| 18 | - .ivu-table .demo-table-info-cell-age { | ||
| 19 | - background-color: #ff6600; | ||
| 20 | - color: #fff; | ||
| 21 | - } | ||
| 22 | - .ivu-table .demo-table-info-cell-address { | ||
| 23 | - background-color: #187; | ||
| 24 | - color: #fff; | ||
| 25 | - } | ||
| 26 | -</style> | ||
| 27 | <template> | 1 | <template> |
| 28 | - <p>自定义行样式：</p> | ||
| 29 | - <!--<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>--> | ||
| 30 | - <p>自定义列样式：</p> | ||
| 31 | - <i-table :columns="columns9" :data="data1"></i-table> | ||
| 32 | - <p>自定义任意单元格样式：</p> | ||
| 33 | - <!--<i-table :columns="columns1" :data="data8"></i-table>--> | 2 | + <!--<i-select :model.sync="model1" style="width:200px">--> |
| 3 | + <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> | ||
| 4 | + <!--</i-select>--> | ||
| 5 | + <i-table border :content="self" :columns="columns7" :data="data6"></i-table> | ||
| 34 | </template> | 6 | </template> |
| 35 | <script> | 7 | <script> |
| 36 | export default { | 8 | export default { |
| 37 | data () { | 9 | data () { |
| 38 | return { | 10 | return { |
| 39 | - columns1: [ | 11 | + cityList: [ |
| 40 | { | 12 | { |
| 41 | - title: '姓名', | ||
| 42 | - key: 'name' | 13 | + value: 'beijing', |
| 14 | + label: '北京市' | ||
| 43 | }, | 15 | }, |
| 44 | { | 16 | { |
| 45 | - title: '年龄', | ||
| 46 | - key: 'age' | 17 | + value: 'shanghai', |
| 18 | + label: '上海市' | ||
| 47 | }, | 19 | }, |
| 48 | { | 20 | { |
| 49 | - title: '地址', | ||
| 50 | - key: 'address' | ||
| 51 | - } | ||
| 52 | - ], | ||
| 53 | - columns9: [ | 21 | + value: 'shenzhen', |
| 22 | + label: '深圳市' | ||
| 23 | + }, | ||
| 54 | { | 24 | { |
| 55 | - title: '姓名', | ||
| 56 | - key: 'name' | 25 | + value: 'hangzhou', |
| 26 | + label: '杭州市' | ||
| 57 | }, | 27 | }, |
| 58 | { | 28 | { |
| 59 | - title: '年龄', | ||
| 60 | - key: 'age', | ||
| 61 | - className: 'demo-table-info-column' | 29 | + value: 'nanjing', |
| 30 | + label: '南京市' | ||
| 62 | }, | 31 | }, |
| 63 | { | 32 | { |
| 64 | - title: '地址', | ||
| 65 | - key: 'address' | 33 | + value: 'chongqing', |
| 34 | + label: '重庆市' | ||
| 66 | } | 35 | } |
| 67 | ], | 36 | ], |
| 68 | - data1: [ | 37 | + model1: 'shanghai', |
| 38 | + self: this, | ||
| 39 | + columns7: [ | ||
| 69 | { | 40 | { |
| 70 | - name: '王小明', | ||
| 71 | - age: 18, | ||
| 72 | - address: '北京市朝阳区芍药居' | 41 | + title: '姓名', |
| 42 | + key: 'name', | ||
| 43 | + render (row, column, index) { | ||
| 44 | + return `<Icon type="person"></Icon> <strong>${row.name}</strong>`; | ||
| 45 | + } | ||
| 73 | }, | 46 | }, |
| 74 | { | 47 | { |
| 75 | - name: '张小刚', | ||
| 76 | - age: 25, | ||
| 77 | - address: '北京市海淀区西二旗' | 48 | + title: '年龄', |
| 49 | + key: 'age' | ||
| 78 | }, | 50 | }, |
| 79 | { | 51 | { |
| 80 | - name: '李小红', | ||
| 81 | - age: 30, | ||
| 82 | - address: '上海市浦东新区世纪大道' | 52 | + title: '地址', |
| 53 | + key: 'address' | ||
| 83 | }, | 54 | }, |
| 84 | { | 55 | { |
| 85 | - name: '周小伟', | ||
| 86 | - age: 26, | ||
| 87 | - address: '深圳市南山区深南大道' | 56 | + title: '操作', |
| 57 | + key: 'action', | ||
| 58 | + align: 'center', | ||
| 59 | + render (row, column, index) { | ||
| 60 | + return ` | ||
| 61 | +<i-select :model.sync="model1" style="width:200px"> | ||
| 62 | + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | ||
| 63 | + </i-select><br><br><br> | ||
| 64 | +`; | ||
| 65 | + } | ||
| 88 | } | 66 | } |
| 89 | ], | 67 | ], |
| 90 | - data8: [ | 68 | + data6: [ |
| 91 | { | 69 | { |
| 92 | name: '王小明', | 70 | name: '王小明', |
| 93 | age: 18, | 71 | age: 18, |
| @@ -96,11 +74,7 @@ | @@ -96,11 +74,7 @@ | ||
| 96 | { | 74 | { |
| 97 | name: '张小刚', | 75 | name: '张小刚', |
| 98 | age: 25, | 76 | age: 25, |
| 99 | - address: '北京市海淀区西二旗', | ||
| 100 | - cellClassName: { | ||
| 101 | - age: 'demo-table-info-cell-age', | ||
| 102 | - address: 'demo-table-info-cell-address' | ||
| 103 | - } | 77 | + address: '北京市海淀区西二旗' |
| 104 | }, | 78 | }, |
| 105 | { | 79 | { |
| 106 | name: '李小红', | 80 | name: '李小红', |
| @@ -110,22 +84,20 @@ | @@ -110,22 +84,20 @@ | ||
| 110 | { | 84 | { |
| 111 | name: '周小伟', | 85 | name: '周小伟', |
| 112 | age: 26, | 86 | age: 26, |
| 113 | - address: '深圳市南山区深南大道', | ||
| 114 | - cellClassName: { | ||
| 115 | - name: 'demo-table-info-cell-name' | ||
| 116 | - } | 87 | + address: '深圳市南山区深南大道' |
| 117 | } | 88 | } |
| 118 | ] | 89 | ] |
| 119 | } | 90 | } |
| 120 | }, | 91 | }, |
| 121 | methods: { | 92 | methods: { |
| 122 | - rowClassName (row, index) { | ||
| 123 | - if (index === 1) { | ||
| 124 | - return 'demo-table-info-row'; | ||
| 125 | - } else if (index === 3) { | ||
| 126 | - return 'demo-table-error-row'; | ||
| 127 | - } | ||
| 128 | - return ''; | 93 | + show (index) { |
| 94 | + this.$Modal.info({ | ||
| 95 | + title: '用户信息', | ||
| 96 | + content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}` | ||
| 97 | + }) | ||
| 98 | + }, | ||
| 99 | + remove (index) { | ||
| 100 | + this.data6.splice(index, 1); | ||
| 129 | } | 101 | } |
| 130 | } | 102 | } |
| 131 | } | 103 | } |