-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
@@ -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 @@
{{row[column.key]}}
-
+
{{ 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 |