Commit d5d4d8e3e9c6554c03821065a168b166894fbfc6
1 parent
4ab11811
fixed #188
fixed #188
Showing
2 changed files
with
47 additions
and
87 deletions
Show diff stats
src/styles/components/dropdown.less
| @@ -3,7 +3,7 @@ | @@ -3,7 +3,7 @@ | ||
| 3 | 3 | ||
| 4 | .@{dropdown-prefix-cls} { | 4 | .@{dropdown-prefix-cls} { |
| 5 | display: inline-block; | 5 | display: inline-block; |
| 6 | - position: relative; | 6 | + //position: relative; |
| 7 | 7 | ||
| 8 | .@{select-dropdown-prefix-cls} { | 8 | .@{select-dropdown-prefix-cls} { |
| 9 | overflow: visible; | 9 | overflow: visible; |
| @@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
| 15 | 15 | ||
| 16 | &-rel{ | 16 | &-rel{ |
| 17 | display: inline-block; | 17 | display: inline-block; |
| 18 | + position: relative; | ||
| 18 | } | 19 | } |
| 19 | 20 | ||
| 20 | &-menu{ | 21 | &-menu{ |
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 .demo-table-info-column{ | ||
| 11 | - background-color: #2db7f5; | ||
| 12 | - color: #fff; | ||
| 13 | - border-bottom: 1px solid #2db7f5; | ||
| 14 | - } | ||
| 15 | - .ivu-table .demo-table-info-cell-name { | ||
| 16 | - background-color: #2db7f5; | ||
| 17 | - color: #fff; | ||
| 18 | - } | ||
| 19 | - .ivu-table .demo-table-info-cell-age { | ||
| 20 | - background-color: #ff6600; | ||
| 21 | - color: #fff; | ||
| 22 | - } | ||
| 23 | - .ivu-table .demo-table-info-cell-address { | ||
| 24 | - background-color: #187; | ||
| 25 | - color: #fff; | ||
| 26 | - } | ||
| 27 | -</style> | ||
| 28 | <template> | 1 | <template> |
| 29 | - <p>自定义行样式：</p> | ||
| 30 | - <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table> | ||
| 31 | - <p>自定义列样式：</p> | ||
| 32 | - <i-table :columns="columns9" :data="data1"></i-table> | ||
| 33 | - <p>自定义任意单元格样式：</p> | ||
| 34 | - <i-table :columns="columns1" :data="data8"></i-table> | 2 | + <i-table border :content="self" :columns="columns7" :data="data6"></i-table> |
| 35 | </template> | 3 | </template> |
| 36 | <script> | 4 | <script> |
| 37 | export default { | 5 | export default { |
| 38 | data () { | 6 | data () { |
| 39 | return { | 7 | return { |
| 40 | - columns1: [ | 8 | + self: this, |
| 9 | + columns7: [ | ||
| 41 | { | 10 | { |
| 42 | title: '姓名', | 11 | title: '姓名', |
| 43 | - key: 'name' | 12 | + key: 'name', |
| 13 | + render (row, column, index) { | ||
| 14 | + return `<Icon type="person"></Icon> <strong>${row.name}</strong>`; | ||
| 15 | + } | ||
| 44 | }, | 16 | }, |
| 45 | { | 17 | { |
| 46 | title: '年龄', | 18 | title: '年龄', |
| @@ -48,25 +20,40 @@ | @@ -48,25 +20,40 @@ | ||
| 48 | }, | 20 | }, |
| 49 | { | 21 | { |
| 50 | title: '地址', | 22 | title: '地址', |
| 51 | - key: 'address' | ||
| 52 | - } | ||
| 53 | - ], | ||
| 54 | - columns9: [ | ||
| 55 | - { | ||
| 56 | - title: '姓名', | ||
| 57 | - key: 'name' | ||
| 58 | - }, | ||
| 59 | - { | ||
| 60 | - title: '年龄', | ||
| 61 | - key: 'age', | ||
| 62 | - className: 'demo-table-info-column' | 23 | + key: 'address', |
| 24 | + render () { | ||
| 25 | + return ` | ||
| 26 | +<Poptip title="提示标题" content="提示内容" placement="bottom-end"> | ||
| 27 | + <i-button>click 激活</i-button> | ||
| 28 | + </Poptip> | ||
| 29 | +` | ||
| 30 | + } | ||
| 63 | }, | 31 | }, |
| 64 | { | 32 | { |
| 65 | - title: '地址', | ||
| 66 | - key: 'address' | 33 | + title: '操作', |
| 34 | + key: 'action', | ||
| 35 | + width: 150, | ||
| 36 | + align: 'center', | ||
| 37 | + render (row, column, index) { | ||
| 38 | + return ` | ||
| 39 | +<Dropdown trigger="click" style="margin-left: 20px"> | ||
| 40 | + <a href="javascript:void(0)"> | ||
| 41 | + click 触发 | ||
| 42 | + <Icon type="arrow-down-b"></Icon> | ||
| 43 | + </a> | ||
| 44 | + <Dropdown-menu slot="list"> | ||
| 45 | + <Dropdown-item>驴打滚</Dropdown-item> | ||
| 46 | + <Dropdown-item>炸酱面</Dropdown-item> | ||
| 47 | + <Dropdown-item>豆汁儿</Dropdown-item> | ||
| 48 | + <Dropdown-item>冰糖葫芦</Dropdown-item> | ||
| 49 | + <Dropdown-item>北京烤鸭</Dropdown-item> | ||
| 50 | + </Dropdown-menu> | ||
| 51 | + </Dropdown><br><br><br><br><br> | ||
| 52 | +`; | ||
| 53 | + } | ||
| 67 | } | 54 | } |
| 68 | ], | 55 | ], |
| 69 | - data1: [ | 56 | + data6: [ |
| 70 | { | 57 | { |
| 71 | name: '王小明', | 58 | name: '王小明', |
| 72 | age: 18, | 59 | age: 18, |
| @@ -87,46 +74,18 @@ | @@ -87,46 +74,18 @@ | ||
| 87 | age: 26, | 74 | age: 26, |
| 88 | address: '深圳市南山区深南大道' | 75 | address: '深圳市南山区深南大道' |
| 89 | } | 76 | } |
| 90 | - ], | ||
| 91 | - data8: [ | ||
| 92 | - { | ||
| 93 | - name: '王小明', | ||
| 94 | - age: 18, | ||
| 95 | - address: '北京市朝阳区芍药居' | ||
| 96 | - }, | ||
| 97 | - { | ||
| 98 | - name: '张小刚', | ||
| 99 | - age: 25, | ||
| 100 | - address: '北京市海淀区西二旗', | ||
| 101 | - cellClassName: { | ||
| 102 | - age: 'demo-table-info-cell-age', | ||
| 103 | - address: 'demo-table-info-cell-address' | ||
| 104 | - } | ||
| 105 | - }, | ||
| 106 | - { | ||
| 107 | - name: '李小红', | ||
| 108 | - age: 30, | ||
| 109 | - address: '上海市浦东新区世纪大道' | ||
| 110 | - }, | ||
| 111 | - { | ||
| 112 | - name: '周小伟', | ||
| 113 | - age: 26, | ||
| 114 | - address: '深圳市南山区深南大道', | ||
| 115 | - cellClassName: { | ||
| 116 | - name: 'demo-table-info-cell-name' | ||
| 117 | - } | ||
| 118 | - } | ||
| 119 | ] | 77 | ] |
| 120 | } | 78 | } |
| 121 | }, | 79 | }, |
| 122 | methods: { | 80 | methods: { |
| 123 | - rowClassName (row, index) { | ||
| 124 | - if (index === 1) { | ||
| 125 | - return 'demo-table-info-row'; | ||
| 126 | - } else if (index === 3) { | ||
| 127 | - return 'demo-table-error-row'; | ||
| 128 | - } | ||
| 129 | - return ''; | 81 | + show (index) { |
| 82 | + this.$Modal.info({ | ||
| 83 | + title: '用户信息', | ||
| 84 | + content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}` | ||
| 85 | + }) | ||
| 86 | + }, | ||
| 87 | + remove (index) { | ||
| 88 | + this.data6.splice(index, 1); | ||
| 130 | } | 89 | } |
| 131 | } | 90 | } |
| 132 | } | 91 | } |