【修改】j-table样式问题
This commit is contained in:
dusicong
@@ -1,14 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
|
||||
<a-table
|
||||
:columns="aColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ispagination"
|
||||
<a-table
|
||||
:columns="aColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ispagination"
|
||||
:rowSelection="rowSelect"
|
||||
bordered
|
||||
:scroll="{ x: 1920 }"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a>Invite 一 {{ record.name }}</a>
|
||||
<a-divider type="vertical" />
|
||||
<a>Delete</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="ant-dropdown-link">
|
||||
More actions
|
||||
<a-icon type="down" />
|
||||
</a>
|
||||
</span>
|
||||
<span :slot="a.slots.title" v-for="a in aColumns" :key="a.dataIndex">
|
||||
{{ a.slots.title }}
|
||||
<a-dropdown :trigger="['click']">
|
||||
@@ -34,12 +42,7 @@
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu key="check" title="筛选列头">
|
||||
<a-checkbox-group
|
||||
v-model="checkedList"
|
||||
:options="plainOptions"
|
||||
@change="onChange"
|
||||
:style="checkboxStyle"
|
||||
/>
|
||||
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
@@ -113,10 +116,6 @@ export default {
|
||||
height: '30px',
|
||||
lineHeight: '30px',
|
||||
},
|
||||
checkboxStyle: {
|
||||
display: 'block',
|
||||
lineHeight: '30px',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -306,4 +305,19 @@ export default {
|
||||
.ant-dropdown-menu-submenu-popup {
|
||||
width: 7.5rem;
|
||||
}
|
||||
|
||||
.ant-checkbox-group-item {
|
||||
line-height: 30px;
|
||||
padding-left: 15px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
/* autoprefixer: on */
|
||||
-webkit-line-clamp: 1;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
+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