From 021bbec2c3cee5862ac1eb01c889d1e81b409074 Mon Sep 17 00:00:00 2001 From: 梁灏 Date: Mon, 25 Jun 2018 13:03:08 +0800 Subject: [PATCH] update Table Icons --- examples/routers/table.vue | 607 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- src/components/table/cell.vue | 2 +- src/components/table/table-head.vue | 6 +++--- src/styles/mixins/caret.less | 1 + 4 files changed, 118 insertions(+), 498 deletions(-) diff --git a/examples/routers/table.vue b/examples/routers/table.vue index 539e630..ca567be 100644 --- a/examples/routers/table.vue +++ b/examples/routers/table.vue @@ -1,76 +1,10 @@ - - @@ -78,454 +12,139 @@ table { export default { data () { return { - isCollapsed: false, - columns1: [ + tableData1: this.mockTableData1(), + tableColumns1: [ { title: 'Name', - key: 'name', - align: 'center', - minWidth: 100, - maxWidth: 200, - fixed: 'left', - filters: [ - { - label: 'Joe', - value: 1 - }, - { - label: 'John', - value: 2 - } - ], - filterMultiple: false, - filterMethod (value, row) { - if (value === 1) { - return row.name === 'Joe'; - } else if (value === 2) { - return row.name === 'John Brown'; - } - } - }, - { - title: 'Other', - align: 'center', - children: [ - { - title: 'Age', - key: 'age', - align: 'center', - minWidth: 100, - maxWidth: 200, - sortable: true - }, - { - title: 'Address', - align: 'center', - children: [ - { - title: 'Street', - key: 'street', - align: 'center', - minWidth: 100, - maxWidth: 200, - }, - { - title: 'Block', - align: 'center', - children: [ - { - title: 'Building', - key: 'building', - align: 'center', - minWidth: 100, - maxWidth: 200, - sortable: true - }, - { - title: 'Door No.', - key: 'door', - align: 'center', - minWidth: 100, - maxWidth: 200, - } - ] - } - ] - } - ] - }, - { - title: 'Company', - align: 'center', - children: [ - { - title: 'Company Address', - key: 'caddress', - align: 'center', - minWidth: 100, - maxWidth: 200, - }, - { - title: 'Company Name', - key: 'cname', - align: 'center', - minWidth: 100, - maxWidth: 200, - } - ] - }, - // { - // title: 'Gender', - // key: 'gender', - // align: 'center', - // width: 200, - // fixed: 'right' - // }, - { - title: 'Gender', - key: 'gender', - align: 'center', - minWidth: 100, - maxWidth: 200, - fixed: 'right' - } - ], - columns2: [ - { - title: 'Name', - key: 'name', - width: 100, - fixed: 'left' - }, - { - title: 'Age', - key: 'age', - width: 100, - fixed: 'right', - sortable: true - }, - { - title: 'Province', - key: 'province', - width: 100 - }, - { - title: 'City', - key: 'city', - width: 100 - }, - { - title: 'Address', - key: 'address', - width: 200 + key: 'name' }, { - title: 'Postcode', - key: 'zip', - width: 100 + title: 'Status', + key: 'status', + render: (h, params) => { + const row = params.row; + const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red'; + const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail'; + + return h('Tag', { + props: { + type: 'dot', + color: color + } + }, text); + } }, { - title: 'Action', - key: 'action', - fixed: 'right', - width: 120, + title: 'Portrayal', + key: 'portrayal', render: (h, params) => { - return h('div', [ - h('Button', { - props: { - type: 'text', - size: 'small' - } - }, 'View'), - h('Button', { - props: { - type: 'text', - size: 'small' - } - }, 'Edit') + return h('Poptip', { + props: { + trigger: 'hover', + title: params.row.portrayal.length + 'portrayals', + placement: 'bottom' + } + }, [ + h('Tag', params.row.portrayal.length), + h('div', { + slot: 'content' + }, [ + h('ul', this.tableData1[params.index].portrayal.map(item => { + return h('li', { + style: { + textAlign: 'center', + padding: '4px' + } + }, item) + })) + ]) ]); } - } - ], - data1: [], - data4: [ - { - name: 'John Brown', - age: 18, - address: 'New York No. 1 Lake Park', - province: 'America', - city: 'New York', - zip: 100000 - }, - { - name: 'Jim Green', - age: 24, - address: 'Washington, D.C. No. 1 Lake Park', - province: 'America', - city: 'Washington, D.C.', - zip: 100000 - }, - { - name: 'Joe Black', - age: 30, - address: 'Sydney No. 1 Lake Park', - province: 'Australian', - city: 'Sydney', - zip: 100000 - }, - { - name: 'Jon Snow', - age: 26, - address: 'Ottawa No. 2 Lake Park', - province: 'Canada', - city: 'Ottawa', - zip: 100000 - }, - { - name: 'John Brown', - age: 18, - address: 'New York No. 1 Lake Park', - province: 'America', - city: 'New York', - zip: 100000 - }, - { - name: 'Jim Green', - age: 24, - address: 'Washington, D.C. No. 1 Lake Park', - province: 'America', - city: 'Washington, D.C.', - zip: 100000 - }, - { - name: 'Joe Black', - age: 30, - address: 'Sydney No. 1 Lake Park', - province: 'Australian', - city: 'Sydney', - zip: 100000 - }, - { - name: 'Jon Snow', - age: 26, - address: 'Ottawa No. 2 Lake Park', - province: 'Canada', - city: 'Ottawa', - zip: 100000 - } - ], - columns5: [ - { - title: 'Date', - key: 'date', - sortable: true - }, - { - title: 'Name', - key: 'name' - }, - { - title: 'Age', - key: 'age', - sortable: true - }, - { - title: 'Address', - key: 'address' - } - ], - data5: [ - { - name: 'John Brown', - age: 18, - address: 'New York No. 1 Lake Park', - date: '2016-10-03' - }, - { - name: 'Jim Green', - age: 24, - address: 'London No. 1 Lake Park', - date: '2016-10-01' }, { - name: 'Joe Black', - age: 30, - address: 'Sydney No. 1 Lake Park', - date: '2016-10-02' - }, - { - name: 'Jon Snow', - age: 26, - address: 'Ottawa No. 2 Lake Park', - date: '2016-10-04' - } - ], - columns6: [ - { - title: 'Date', - key: 'date' - }, - { - title: 'Name', - key: 'name' + title: 'People', + key: 'people', + render: (h, params) => { + return h('Poptip', { + props: { + trigger: 'hover', + title: params.row.people.length + 'customers', + placement: 'bottom' + } + }, [ + h('Tag', params.row.people.length), + h('div', { + slot: 'content' + }, [ + h('ul', this.tableData1[params.index].people.map(item => { + return h('li', { + style: { + textAlign: 'center', + padding: '4px' + } + }, item.n + '：' + item.c + 'People') + })) + ]) + ]); + } }, { - title: 'Age', - key: 'age', - filters: [ - { - label: 'Greater than 25', - value: 1 - }, - { - label: 'Less than 25', - value: 2 - } - ], - filterMultiple: false, - filterMethod (value, row) { - if (value === 1) { - return row.age > 25; - } else if (value === 2) { - return row.age < 25; - } + title: 'Sampling Time', + key: 'time', + render: (h, params) => { + return h('div', 'Almost' + params.row.time + 'days'); } }, { - title: 'Address', - key: 'address', - fixed: 'right', - filters: [ + title: 'Updated Time', + key: 'update', + render: (h, params) => { + return h('div', this.formatDate(this.tableData1[params.index].update)); + } + } + ] + } + }, + methods: { + mockTableData1 () { + let data = []; + for (let i = 0; i < 10; i++) { + data.push({ + name: 'Business' + Math.floor(Math.random () * 100 + 1), + status: Math.floor(Math.random () * 3 + 1), + portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'], + people: [ { - label: 'New York', - value: 'New York' + n: 'People' + Math.floor(Math.random () * 100 + 1), + c: Math.floor(Math.random () * 1000000 + 100000) }, { - label: 'London', - value: 'London' + n: 'People' + Math.floor(Math.random () * 100 + 1), + c: Math.floor(Math.random () * 1000000 + 100000) }, { - label: 'Sydney', - value: 'Sydney' + n: 'People' + Math.floor(Math.random () * 100 + 1), + c: Math.floor(Math.random () * 1000000 + 100000) } ], - filterMethod (value, row) { - return row.address.indexOf(value) > -1; - } - } - ], - - columns7: [ - { - title: 'Date', - key: 'date', - sortable: true, - width:200, - }, - { - title: 'Name', - key: 'name', - width:200, - }, - { - title: 'Age', - key: 'age', - width:200, - }, - { - title: 'Address', - key: 'address', - width:200, - } - ], - data7: [ - { - name: 'John Brown', - age: 18, - address: 'New York No. 1 Lake Park', - date: '2016-10-03' - }, - { - name: 'Jim Green', - age: 24, - address: 'London No. 1 Lake Park', - date: '2016-10-01' - }, - { - name: 'Joe Black', - age: 30, - address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park', - date: '2016-10-02' - }, - { - name: 'Jon Snow', - age: 26, - address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park', - date: '2016-10-04' - } - ], - - columns8: [ - { - title: 'Address', - key: 'address', - minWidth:200, - //maxWidth:300, - }, - { - title: 'Date', - key: 'date', - sortable: true, - minWidth:100, - maxWidth:150, - }, - { - title: 'Name', - key: 'name', - minWidth:100, - maxWidth:200, - }, - { - title: 'Age', - key: 'age', - minWidth:60, - maxWidth:100, - }, - ], - } - }, - mounted () { - const data = []; - for (let i = 0; i < 20; i++) { - data.push({ - key: i, - name: 'John Brown', - age: i + 1, - street: 'Lake Park', - building: 'C', - door: 2035, - caddress: 'Lake Street 42', - cname: 'SoftLake Co', - gender: 'M', - }); - } - this.data1 = data; - }, - methods: { - toggleCollapse () { - this.$refs.side.toggleCollapse(); + time: Math.floor(Math.random () * 7 + 1), + update: new Date() + }) + } + return data; }, - change () { - this.isCollapsed = !this.isCollapsed; + formatDate (date) { + const y = date.getFullYear(); + let m = date.getMonth() + 1; + m = m < 10 ? '0' + m : m; + let d = date.getDate(); + d = d < 10 ? ('0' + d) : d; + return y + '-' + m + '-' + d; }, - changed (res) { - console.log(res) - } - }, - watch: { - isCollapsed (val) { - // console.log(val) + changePage () { + // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server + this.tableData1 = this.mockTableData1(); } } } - \ No newline at end of file + diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue index e03247c..5b1e6ff 100644 --- a/src/components/table/cell.vue +++ b/src/components/table/cell.vue @@ -8,7 +8,7 @@ {{ column.title || '#' }} - - + + - +
diff --git a/src/styles/mixins/caret.less b/src/styles/mixins/caret.less index de05612..9a88049 100644 --- a/src/styles/mixins/caret.less +++ b/src/styles/mixins/caret.less @@ -18,6 +18,7 @@ position: absolute; color: @btn-disable-color; transition: color @transition-time @ease-in-out; + font-size: @font-size-large; &:hover{ color: inherit; -- libgit2 0.21.4