Commit d0788ae9dd30c40f74bdbefae77f7d6c5845483f
1 parent
b89a982e
fixed #207
fixed #207
Showing
2 changed files
with
19 additions
and
281 deletions
Show diff stats
src/styles/components/table.less
| @@ -300,7 +300,8 @@ | @@ -300,7 +300,8 @@ | ||
| 300 | .ivu-poptip-popper{ | 300 | .ivu-poptip-popper{ |
| 301 | min-width: 0; | 301 | min-width: 0; |
| 302 | text-align: left; | 302 | text-align: left; |
| 303 | - | 303 | + } |
| 304 | + thead .ivu-poptip-popper{ | ||
| 304 | .ivu-poptip-body{ | 305 | .ivu-poptip-body{ |
| 305 | padding: 0; | 306 | padding: 0; |
| 306 | } | 307 | } |
test/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div style="width: 800px"> | ||
| 3 | - <i-table border :content="self" :columns="columns7" :data="data6"></i-table> | ||
| 4 | - <!--<i-table width="550" height="200" border :columns="columns5" :data="data4"></i-table>--> | ||
| 5 | - <!--<br>--> | ||
| 6 | - <!--<i-table border height="300" :columns="columns1" :data="data1"></i-table>--> | ||
| 7 | - <!--<br>--> | ||
| 8 | - <!--<i-table border height="300" :columns="columns1" :data="data2"></i-table>--> | ||
| 9 | - <!--<br>--> | ||
| 10 | - <!--<i-table border height="300" :columns="columns2" :data="data1"></i-table>--> | ||
| 11 | - <!--<br>--> | ||
| 12 | - <!--<i-table border height="300" :columns="columns3" :data="data1"></i-table>--> | ||
| 13 | - </div> | 2 | + <i-table border :content="self" :columns="columns7" :data="data6"></i-table> |
| 14 | </template> | 3 | </template> |
| 15 | <script> | 4 | <script> |
| 16 | export default { | 5 | export default { |
| 17 | data () { | 6 | data () { |
| 18 | return { | 7 | return { |
| 19 | self: this, | 8 | self: this, |
| 20 | - cityList: [ | ||
| 21 | - { | ||
| 22 | - value: 'beijing', | ||
| 23 | - label: '北京市' | ||
| 24 | - }, | ||
| 25 | - { | ||
| 26 | - value: 'shanghai', | ||
| 27 | - label: '上海市' | ||
| 28 | - }, | ||
| 29 | - { | ||
| 30 | - value: 'shenzhen', | ||
| 31 | - label: '深圳市' | ||
| 32 | - }, | ||
| 33 | - { | ||
| 34 | - value: 'hangzhou', | ||
| 35 | - label: '杭州市' | ||
| 36 | - }, | ||
| 37 | - { | ||
| 38 | - value: 'nanjing', | ||
| 39 | - label: '南京市' | ||
| 40 | - }, | ||
| 41 | - { | ||
| 42 | - value: 'chongqing', | ||
| 43 | - label: '重庆市' | ||
| 44 | - } | ||
| 45 | - ], | ||
| 46 | - model1: '', | ||
| 47 | columns7: [ | 9 | columns7: [ |
| 48 | { | 10 | { |
| 49 | title: '姓名', | 11 | title: '姓名', |
| @@ -63,13 +25,13 @@ | @@ -63,13 +25,13 @@ | ||
| 63 | { | 25 | { |
| 64 | title: '操作', | 26 | title: '操作', |
| 65 | key: 'action', | 27 | key: 'action', |
| 66 | - width: 400, | 28 | + width: 150, |
| 67 | align: 'center', | 29 | align: 'center', |
| 68 | render (row, column, index) { | 30 | render (row, column, index) { |
| 69 | - return ` | ||
| 70 | -<Date-picker type="daterange" placement="bottom-end" placeholder="选择日期"></Date-picker> | ||
| 71 | -<br><br><br><br><br><br> | ||
| 72 | -`; | 31 | +// return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`; |
| 32 | + return `<Poptip width="250" confirm placement="left" title="您确认删除吗？" @on-ok="deleteProject(${index})"> | ||
| 33 | + <i-button size="small" type="error">删除</i-button> | ||
| 34 | + </Poptip>` | ||
| 73 | } | 35 | } |
| 74 | } | 36 | } |
| 75 | ], | 37 | ], |
| @@ -94,244 +56,19 @@ | @@ -94,244 +56,19 @@ | ||
| 94 | age: 26, | 56 | age: 26, |
| 95 | address: '深圳市南山区深南大道' | 57 | address: '深圳市南山区深南大道' |
| 96 | } | 58 | } |
| 97 | - ], | ||
| 98 | - columns1: [ | ||
| 99 | - { | ||
| 100 | - title: '姓名', | ||
| 101 | - key: 'name' | ||
| 102 | - }, | ||
| 103 | - { | ||
| 104 | - title: '年龄', | ||
| 105 | - key: 'age' | ||
| 106 | - }, | ||
| 107 | - { | ||
| 108 | - title: '地址', | ||
| 109 | - key: 'address' | ||
| 110 | - } | ||
| 111 | - ], | ||
| 112 | - columns2: [ | ||
| 113 | - { | ||
| 114 | - title: '姓名', | ||
| 115 | - key: 'name' | ||
| 116 | - }, | ||
| 117 | - { | ||
| 118 | - title: '年龄', | ||
| 119 | - key: 'age', | ||
| 120 | - fixed: 'left' | ||
| 121 | - }, | ||
| 122 | - { | ||
| 123 | - title: '地址', | ||
| 124 | - key: 'address' | ||
| 125 | - } | ||
| 126 | - ], | ||
| 127 | - columns3: [ | ||
| 128 | - { | ||
| 129 | - title: '姓名', | ||
| 130 | - key: 'name' | ||
| 131 | - }, | ||
| 132 | - { | ||
| 133 | - title: '年龄', | ||
| 134 | - key: 'age', | ||
| 135 | - fixed: 'right' | ||
| 136 | - }, | ||
| 137 | - { | ||
| 138 | - title: '地址', | ||
| 139 | - key: 'address' | ||
| 140 | - } | ||
| 141 | - ], | ||
| 142 | - data1: [ | ||
| 143 | - { | ||
| 144 | - name: '王小明', | ||
| 145 | - age: 18, | ||
| 146 | - address: '北京市朝阳区芍药居' | ||
| 147 | - }, | ||
| 148 | - { | ||
| 149 | - name: '张小刚', | ||
| 150 | - age: 25, | ||
| 151 | - address: '北京市海淀区西二旗' | ||
| 152 | - }, | ||
| 153 | - { | ||
| 154 | - name: '李小红', | ||
| 155 | - age: 30, | ||
| 156 | - address: '上海市浦东新区世纪大道' | ||
| 157 | - }, | ||
| 158 | - { | ||
| 159 | - name: '周小伟', | ||
| 160 | - age: 26, | ||
| 161 | - address: '深圳市南山区深南大道' | ||
| 162 | - }, | ||
| 163 | - { | ||
| 164 | - name: '王小明', | ||
| 165 | - age: 18, | ||
| 166 | - address: '北京市朝阳区芍药居' | ||
| 167 | - }, | ||
| 168 | - { | ||
| 169 | - name: '张小刚', | ||
| 170 | - age: 25, | ||
| 171 | - address: '北京市海淀区西二旗' | ||
| 172 | - }, | ||
| 173 | - { | ||
| 174 | - name: '李小红', | ||
| 175 | - age: 30, | ||
| 176 | - address: '上海市浦东新区世纪大道' | ||
| 177 | - }, | ||
| 178 | - { | ||
| 179 | - name: '周小伟', | ||
| 180 | - age: 26, | ||
| 181 | - address: '深圳市南山区深南大道' | ||
| 182 | - }, | ||
| 183 | - { | ||
| 184 | - name: '王小明', | ||
| 185 | - age: 18, | ||
| 186 | - address: '北京市朝阳区芍药居' | ||
| 187 | - }, | ||
| 188 | - { | ||
| 189 | - name: '张小刚', | ||
| 190 | - age: 25, | ||
| 191 | - address: '北京市海淀区西二旗' | ||
| 192 | - }, | ||
| 193 | - { | ||
| 194 | - name: '李小红', | ||
| 195 | - age: 30, | ||
| 196 | - address: '上海市浦东新区世纪大道' | ||
| 197 | - }, | ||
| 198 | - { | ||
| 199 | - name: '周小伟', | ||
| 200 | - age: 26, | ||
| 201 | - address: '深圳市南山区深南大道' | ||
| 202 | - } | ||
| 203 | - ], | ||
| 204 | - data2: [ | ||
| 205 | - { | ||
| 206 | - name: '王小明', | ||
| 207 | - age: 18, | ||
| 208 | - address: '北京市朝阳区芍药居' | ||
| 209 | - }, | ||
| 210 | - { | ||
| 211 | - name: '张小刚', | ||
| 212 | - age: 25, | ||
| 213 | - address: '北京市海淀区西二旗' | ||
| 214 | - }, | ||
| 215 | - { | ||
| 216 | - name: '李小红', | ||
| 217 | - age: 30, | ||
| 218 | - address: '上海市浦东新区世纪大道' | ||
| 219 | - }, | ||
| 220 | - { | ||
| 221 | - name: '周小伟', | ||
| 222 | - age: 26, | ||
| 223 | - address: '深圳市南山区深南大道' | ||
| 224 | - } | ||
| 225 | - ], | ||
| 226 | - columns5: [ | ||
| 227 | - { | ||
| 228 | - title: '姓名', | ||
| 229 | - key: 'name', | ||
| 230 | - width: 100, | ||
| 231 | - fixed: 'left' | ||
| 232 | - }, | ||
| 233 | - { | ||
| 234 | - title: '年龄', | ||
| 235 | - key: 'age', | ||
| 236 | - width: 100 | ||
| 237 | - }, | ||
| 238 | - { | ||
| 239 | - title: '省份', | ||
| 240 | - key: 'province', | ||
| 241 | - width: 100 | ||
| 242 | - }, | ||
| 243 | - { | ||
| 244 | - title: '市区', | ||
| 245 | - key: 'city', | ||
| 246 | - width: 100 | ||
| 247 | - }, | ||
| 248 | - { | ||
| 249 | - title: '地址', | ||
| 250 | - key: 'address', | ||
| 251 | - width: 200 | ||
| 252 | - }, | ||
| 253 | - { | ||
| 254 | - title: '邮编', | ||
| 255 | - key: 'zip', | ||
| 256 | - width: 100 | ||
| 257 | - }, | ||
| 258 | - { | ||
| 259 | - title: '操作', | ||
| 260 | - key: 'action', | ||
| 261 | - fixed: 'right', | ||
| 262 | - width: 120, | ||
| 263 | - render () { | ||
| 264 | - return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`; | ||
| 265 | - } | ||
| 266 | - } | ||
| 267 | - ], | ||
| 268 | - data4: [ | ||
| 269 | - { | ||
| 270 | - name: '王小明', | ||
| 271 | - age: 18, | ||
| 272 | - address: '北京市朝阳区芍药居', | ||
| 273 | - province: '北京市', | ||
| 274 | - city: '朝阳区', | ||
| 275 | - zip: 100000 | ||
| 276 | - }, | ||
| 277 | - { | ||
| 278 | - name: '张小刚', | ||
| 279 | - age: 25, | ||
| 280 | - address: '北京市海淀区西二旗', | ||
| 281 | - province: '北京市', | ||
| 282 | - city: '海淀区', | ||
| 283 | - zip: 100000 | ||
| 284 | - }, | ||
| 285 | - { | ||
| 286 | - name: '李小红', | ||
| 287 | - age: 30, | ||
| 288 | - address: '上海市浦东新区世纪大道', | ||
| 289 | - province: '上海市', | ||
| 290 | - city: '浦东新区', | ||
| 291 | - zip: 100000 | ||
| 292 | - }, | ||
| 293 | - { | ||
| 294 | - name: '周小伟', | ||
| 295 | - age: 26, | ||
| 296 | - address: '深圳市南山区深南大道', | ||
| 297 | - province: '广东', | ||
| 298 | - city: '南山区', | ||
| 299 | - zip: 100000 | ||
| 300 | - }, | ||
| 301 | - { | ||
| 302 | - name: '王小明', | ||
| 303 | - age: 18, | ||
| 304 | - address: '北京市朝阳区芍药居', | ||
| 305 | - province: '北京市', | ||
| 306 | - city: '朝阳区', | ||
| 307 | - zip: 100000 | ||
| 308 | - }, | ||
| 309 | - { | ||
| 310 | - name: '张小刚', | ||
| 311 | - age: 25, | ||
| 312 | - address: '北京市海淀区西二旗', | ||
| 313 | - province: '北京市', | ||
| 314 | - city: '海淀区', | ||
| 315 | - zip: 100000 | ||
| 316 | - }, | ||
| 317 | - { | ||
| 318 | - name: '李小红', | ||
| 319 | - age: 30, | ||
| 320 | - address: '上海市浦东新区世纪大道', | ||
| 321 | - province: '上海市', | ||
| 322 | - city: '浦东新区', | ||
| 323 | - zip: 100000 | ||
| 324 | - }, | ||
| 325 | - { | ||
| 326 | - name: '周小伟', | ||
| 327 | - age: 26, | ||
| 328 | - address: '深圳市南山区深南大道', | ||
| 329 | - province: '广东', | ||
| 330 | - city: '南山区', | ||
| 331 | - zip: 100000 | ||
| 332 | - } | ||
| 333 | ] | 59 | ] |
| 334 | } | 60 | } |
| 61 | + }, | ||
| 62 | + methods: { | ||
| 63 | + show (index) { | ||
| 64 | + this.$Modal.info({ | ||
| 65 | + title: '用户信息', | ||
| 66 | + content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}` | ||
| 67 | + }) | ||
| 68 | + }, | ||
| 69 | + remove (index) { | ||
| 70 | + this.data6.splice(index, 1); | ||
| 71 | + } | ||
| 335 | } | 72 | } |
| 336 | } | 73 | } |
| 337 | </script> | 74 | </script> |