【修改】j-table样式问题
This commit is contained in:
dusicong
+130
-111
@@ -1,25 +1,32 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<j-table :isShowPage="isShowPage" :isCheck="isCheck" :isShowDropdown="isShowDropdown" :dataSource="dataSource"
|
||||
:columns="columns">
|
||||
<j-table
|
||||
:isShowPage="isShowPage"
|
||||
:isCheck="isCheck"
|
||||
:isShowDropdown="isShowDropdown"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
bordered
|
||||
>
|
||||
</j-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTable from '@/components/table/jTable'
|
||||
import JTable from '@/components/table/jTable'
|
||||
|
||||
export default {
|
||||
name: 'Jtable',
|
||||
components: {
|
||||
JTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowPage: true, // 是否显示分页
|
||||
isCheck: false, // 是否多选
|
||||
isShowDropdown: true, //是否开启下拉功能
|
||||
dataSource: [{
|
||||
export default {
|
||||
name: 'Jtable',
|
||||
components: {
|
||||
JTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowPage: true, // 是否显示分页
|
||||
isCheck: false, // 是否多选
|
||||
isShowDropdown: true, //是否开启下拉功能
|
||||
dataSource: [
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌1',
|
||||
age: 35,
|
||||
@@ -29,7 +36,8 @@
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦斌2',
|
||||
age: 32,
|
||||
@@ -39,7 +47,8 @@
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '胡彦斌3',
|
||||
age: 32,
|
||||
@@ -49,7 +58,8 @@
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: '胡彦斌4',
|
||||
age: 32,
|
||||
@@ -59,7 +69,8 @@
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: '胡彦斌5',
|
||||
age: 38,
|
||||
@@ -69,7 +80,8 @@
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
name: '胡彦斌6',
|
||||
age: 32,
|
||||
@@ -79,108 +91,115 @@
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
}],
|
||||
columns: [{
|
||||
// title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 1,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '姓名',
|
||||
// 冻结列头的参数
|
||||
// 1为左侧冻结
|
||||
// 2为右侧冻结
|
||||
// 3为不冻结或解冻
|
||||
fixedValue: 3
|
||||
},
|
||||
// fixed: 'right'
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
// title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 1,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '姓名',
|
||||
// 冻结列头的参数
|
||||
// 1为左侧冻结
|
||||
// 2为右侧冻结
|
||||
// 3为不冻结或解冻
|
||||
fixedValue: 3,
|
||||
},
|
||||
{
|
||||
// title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 2,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '年龄',
|
||||
fixedValue: 3
|
||||
},
|
||||
// sorter: (a, b) => a.age - b.age,
|
||||
// fixed: 'right'
|
||||
},
|
||||
{
|
||||
// title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 2,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '年龄',
|
||||
fixedValue: 3,
|
||||
},
|
||||
{
|
||||
// title: '住址',
|
||||
dataIndex: 'address',
|
||||
key: 3,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址',
|
||||
fixedValue: 3
|
||||
},
|
||||
// sorter: (a, b) => a.address.length - b.address.length,
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
},
|
||||
{
|
||||
// title: '住址',
|
||||
dataIndex: 'address',
|
||||
key: 3,
|
||||
width: 200,
|
||||
// sorter: true,
|
||||
slots: {
|
||||
title: '住址',
|
||||
fixedValue: 3,
|
||||
},
|
||||
{
|
||||
// title: '住址1',
|
||||
dataIndex: 'address1',
|
||||
key: 4,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址1',
|
||||
fixedValue: 3
|
||||
}
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
},
|
||||
{
|
||||
// title: '住址1',
|
||||
dataIndex: 'address1',
|
||||
key: 4,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址1',
|
||||
fixedValue: 3,
|
||||
},
|
||||
{
|
||||
// title: '住址2',
|
||||
dataIndex: 'address2',
|
||||
key: 5,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址2',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址2',
|
||||
dataIndex: 'address2',
|
||||
key: 5,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址2',
|
||||
fixedValue: 3,
|
||||
},
|
||||
{
|
||||
// title: '住址3',
|
||||
dataIndex: 'address3',
|
||||
key: 6,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址3',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址3',
|
||||
dataIndex: 'address3',
|
||||
key: 6,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址3',
|
||||
fixedValue: 3,
|
||||
},
|
||||
{
|
||||
// title: '住址4',
|
||||
dataIndex: 'address4',
|
||||
key: 7,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址4',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址4',
|
||||
dataIndex: 'address4',
|
||||
key: 7,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址4',
|
||||
fixedValue: 3,
|
||||
},
|
||||
{
|
||||
// title: '住址5',
|
||||
dataIndex: 'address5',
|
||||
key: 8,
|
||||
slots: {
|
||||
title: '住址5',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址5',
|
||||
dataIndex: 'address5',
|
||||
key: 8,
|
||||
width: 500,
|
||||
slots: {
|
||||
title: '住址5',
|
||||
fixedValue: 3,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
{
|
||||
dataIndex: 'address6',
|
||||
key: 9,
|
||||
width: 500,
|
||||
slots: {
|
||||
title: '操作',
|
||||
fixedValue: 3,
|
||||
},
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
watch: {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user