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
test/routers/table.vue
| 1 | 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 | 3 | </template> |
| 15 | 4 | <script> |
| 16 | 5 | export default { |
| 17 | 6 | data () { |
| 18 | 7 | return { |
| 19 | 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 | 9 | columns7: [ |
| 48 | 10 | { |
| 49 | 11 | title: '姓名', |
| ... | ... | @@ -63,13 +25,13 @@ |
| 63 | 25 | { |
| 64 | 26 | title: '操作', |
| 65 | 27 | key: 'action', |
| 66 | - width: 400, | |
| 28 | + width: 150, | |
| 67 | 29 | align: 'center', |
| 68 | 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 | 56 | age: 26, |
| 95 | 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 | 74 | </script> | ... | ... |