JeroBoot/base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【修改】j-table样式问题

Browse Source
This commit is contained in:
dusicong
2021-03-24 17:38:16 +08:00
parent fec6712c17
commit 4aa873012e
2 changed files with 160 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/table/jTable.vue
+30 -16
View File
@@ -1,14 +1,22 @@
<template> <template>
<div> <div>
<!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度--> <!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
<a-table <a-table
:columns="aColumns" :columns="aColumns"
:dataSource="dataSource" :dataSource="dataSource"
:pagination="ispagination" :pagination="ispagination"
:rowSelection="rowSelect" :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"> <span :slot="a.slots.title" v-for="a in aColumns" :key="a.dataIndex">
{{ a.slots.title }} {{ a.slots.title }}
<a-dropdown :trigger="['click']"> <a-dropdown :trigger="['click']">
@@ -34,12 +42,7 @@
</a-menu-item> </a-menu-item>
</a-sub-menu> </a-sub-menu>
<a-sub-menu key="check" title="筛选列头"> <a-sub-menu key="check" title="筛选列头">
<a-checkbox-group <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
v-model="checkedList"
:options="plainOptions"
@change="onChange"
:style="checkboxStyle"
/>
</a-sub-menu> </a-sub-menu>
</a-menu> </a-menu>
</a-dropdown> </a-dropdown>
@@ -113,10 +116,6 @@ export default {
height: '30px', height: '30px',
lineHeight: '30px', lineHeight: '30px',
}, },
checkboxStyle: {
display: 'block',
lineHeight: '30px',
},
} }
}, },
computed: { computed: {
@@ -306,4 +305,19 @@ export default {
.ant-dropdown-menu-submenu-popup { .ant-dropdown-menu-submenu-popup {
width: 7.5rem; 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> </style>
jero-web/src/views/jero/jtable1.vue
+130 -111
View File
@@ -1,25 +1,32 @@
<template> <template>
<a-card :bordered="false"> <a-card :bordered="false">
<j-table :isShowPage="isShowPage" :isCheck="isCheck" :isShowDropdown="isShowDropdown" :dataSource="dataSource" <j-table
:columns="columns"> :isShowPage="isShowPage"
:isCheck="isCheck"
:isShowDropdown="isShowDropdown"
:dataSource="dataSource"
:columns="columns"
bordered
>
</j-table> </j-table>
</a-card> </a-card>
</template> </template>
<script> <script>
import JTable from '@/components/table/jTable' import JTable from '@/components/table/jTable'
export default { export default {
name: 'Jtable', name: 'Jtable',
components: { components: {
JTable JTable,
}, },
data() { data() {
return { return {
isShowPage: true, // 是否显示分页 isShowPage: true, // 是否显示分页
isCheck: false, // 是否多选 isCheck: false, // 是否多选
isShowDropdown: true, //是否开启下拉功能 isShowDropdown: true, //是否开启下拉功能
dataSource: [{ dataSource: [
{
key: '1', key: '1',
name: '胡彦斌1', name: '胡彦斌1',
age: 35, age: 35,
@@ -29,7 +36,8 @@
address3: '西湖区湖底公园1号', address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号', address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号', address5: '西湖区湖底公园1号',
}, { },
{
key: '2', key: '2',
name: '胡彦斌2', name: '胡彦斌2',
age: 32, age: 32,
@@ -39,7 +47,8 @@
address3: '西湖区湖底公园1号', address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号', address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号', address5: '西湖区湖底公园1号',
}, { },
{
key: '3', key: '3',
name: '胡彦斌3', name: '胡彦斌3',
age: 32, age: 32,
@@ -49,7 +58,8 @@
address3: '西湖区湖底公园1号', address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号', address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号', address5: '西湖区湖底公园1号',
}, { },
{
key: '4', key: '4',
name: '胡彦斌4', name: '胡彦斌4',
age: 32, age: 32,
@@ -59,7 +69,8 @@
address3: '西湖区湖底公园1号', address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号', address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号', address5: '西湖区湖底公园1号',
}, { },
{
key: '5', key: '5',
name: '胡彦斌5', name: '胡彦斌5',
age: 38, age: 38,
@@ -69,7 +80,8 @@
address3: '西湖区湖底公园1号', address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号', address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号', address5: '西湖区湖底公园1号',
}, { },
{
key: '6', key: '6',
name: '胡彦斌6', name: '胡彦斌6',
age: 32, age: 32,
@@ -79,108 +91,115 @@
address3: '西湖区湖底公园1号', address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号', address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号', address5: '西湖区湖底公园1号',
}], },
columns: [{ ],
// title: '姓名', columns: [
dataIndex: 'name', {
key: 1, // title: '姓名',
width: 200, dataIndex: 'name',
slots: { key: 1,
title: '姓名', width: 200,
// 冻结列头的参数 slots: {
// 1为左侧冻结 title: '姓名',
// 2为右侧冻结 // 冻结列头的参数
// 3为不冻结或解冻 // 1为左侧冻结
fixedValue: 3 // 2为右侧冻结
}, // 3为不冻结或解冻
// fixed: 'right' fixedValue: 3,
}, },
{ // fixed: 'right'
// title: '年龄', },
dataIndex: 'age', {
key: 2, // title: '年龄',
width: 200, dataIndex: 'age',
slots: { key: 2,
title: '年龄', width: 200,
fixedValue: 3 slots: {
}, title: '年龄',
// sorter: (a, b) => a.age - b.age, fixedValue: 3,
}, },
{ sorter: (a, b) => a.age - b.age,
// title: '住址', },
dataIndex: 'address', {
key: 3, // title: '住址',
width: 200, dataIndex: 'address',
slots: { key: 3,
title: '住址', width: 200,
fixedValue: 3 // sorter: true,
}, slots: {
// sorter: (a, b) => a.address.length - b.address.length, title: '住址',
fixedValue: 3,
}, },
{ sorter: (a, b) => a.address.length - b.address.length,
// title: '住址1', },
dataIndex: 'address1', {
key: 4, // title: '住址1',
width: 200, dataIndex: 'address1',
slots: { key: 4,
title: '住址1', width: 200,
fixedValue: 3 slots: {
} title: '住址1',
fixedValue: 3,
}, },
{ },
// title: '住址2', {
dataIndex: 'address2', // title: '住址2',
key: 5, dataIndex: 'address2',
width: 200, key: 5,
slots: { width: 200,
title: '住址2', slots: {
fixedValue: 3 title: '住址2',
} fixedValue: 3,
}, },
{ },
// title: '住址3', {
dataIndex: 'address3', // title: '住址3',
key: 6, dataIndex: 'address3',
width: 200, key: 6,
slots: { width: 200,
title: '住址3', slots: {
fixedValue: 3 title: '住址3',
} fixedValue: 3,
}, },
{ },
// title: '住址4', {
dataIndex: 'address4', // title: '住址4',
key: 7, dataIndex: 'address4',
width: 200, key: 7,
slots: { width: 200,
title: '住址4', slots: {
fixedValue: 3 title: '住址4',
} fixedValue: 3,
}, },
{ },
// title: '住址5', {
dataIndex: 'address5', // title: '住址5',
key: 8, dataIndex: 'address5',
slots: { key: 8,
title: '住址5', width: 500,
fixedValue: 3 slots: {
} title: '住址5',
fixedValue: 3,
}, },
], },
} {
}, dataIndex: 'address6',
mounted() { key: 9,
width: 500,
}, slots: {
watch: { title: '操作',
fixedValue: 3,
}, },
methods: { scopedSlots: { customRender: 'action' },
},
],
} }
} },
mounted() {},
watch: {},
methods: {},
}
</script> </script>
<style scoped> <style scoped>
</style> </style>