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

【修改】JTable传参问题修改

Browse Source
This commit is contained in:
zer0Black
2021-03-25 21:45:41 +08:00
parent bcb0016168
commit ce8114b2c2
2 changed files with 80 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/jero/JTable.vue
+56 -50
View File
@@ -1,52 +1,49 @@
<template>
<div>
<!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
<a-table
:columns="aColumns"
:dataSource="dataSource"
:pagination="ispagination"
<a-table
:columns="aColumns"
:dataSource="dataSource"
:pagination="ispagination"
:rowSelection="rowSelect"
>
<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>
v-bind="$props"
v-on="$listeners">
<template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">
<slot :name="slotItem" v-bind="{text, record, index}"></slot>
</template>
<span :slot="a.slots.title" v-for="a in aColumns" :key="a.dataIndex">
{{ a.slots.title }}
<a-dropdown :trigger="['click']">
<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
<!-- 操作 -->
<a-icon type="caret-down" v-if="isShowIcon" />
</a>
<a-menu slot="overlay">
<a-sub-menu key="frozen" title="冻结列头">
<a-menu-item>
<a-radio-group
v-model="a.slots.fixedValue"
@change="
(e) => {
fixedChange(e, a.dataIndex)
}
"
>
<a-radio :style="radioStyle" :value="1"> 左侧冻结 </a-radio>
<a-radio :style="radioStyle" :value="2"> 右侧冻结 </a-radio>
<a-radio :style="radioStyle" :value="3"> 解冻 </a-radio>
</a-radio-group>
</a-menu-item>
</a-sub-menu>
<a-sub-menu key="check" title="筛选列头">
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
</a-sub-menu>
</a-menu>
</a-dropdown>
</span>
{{ a.title }}
<a-dropdown :trigger="['click']">
<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
<!-- 操作 -->
<a-icon type="caret-down" v-if="isShowIcon" />
</a>
<a-menu slot="overlay">
<a-sub-menu key="frozen" title="冻结列头">
<a-menu-item>
<a-radio-group
v-model="a.slots.fixedValue"
@change="
(e) => {
fixedChange(e, a.dataIndex)
}
"
>
<a-radio :style="radioStyle" :value="1"> 左侧冻结 </a-radio>
<a-radio :style="radioStyle" :value="2"> 右侧冻结 </a-radio>
<a-radio :style="radioStyle" :value="3"> 解冻 </a-radio>
</a-radio-group>
</a-menu-item>
</a-sub-menu>
<a-sub-menu key="check" title="筛选列头">
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
</a-sub-menu>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
</template>
@@ -55,7 +52,6 @@
import { Table } from 'ant-design-vue'
export default {
// TODO 命名和全局保持统一，应为JTable
name: 'JTable',
props: Object.assign(
{
@@ -140,14 +136,25 @@ export default {
return false
}
},
slots() {
let slots = []
for (let column of this.columns) {
if (column.scopedSlots && column.scopedSlots.customRender) {
slots.push(column.scopedSlots.customRender)
}
}
return slots
}
},
mounted() {
// console.log(this.aColumns)
// console.log(this.columns)
console.log(this.$attrs)
// 遍历出筛选列头的所有选项
this.columns.forEach((item) => {
let colItem = {
value: item.slots.title,
label: item.slots.title,
value: item.title,
label: item.title,
disabled: false,
}
this.plainOptions.push(colItem)
@@ -161,12 +168,11 @@ export default {
}
// 遍历出筛选列头中的已选项
this.aColumns.forEach((item) => {
this.checkedList.push(item.slots.title)
this.checkedList.push(item.title)
})
},
methods: {
// 用户可自行筛选列头显示的字段
// TODO 该段代码复杂，建议逻辑复杂的代码，在方法名上注释清楚大致逻辑
onChange(e) {
// 只剩一个时候,最后一个多选按钮禁用
if (this.checkedList.length === 1) {
@@ -187,7 +193,7 @@ export default {
//转换为dataIndex
for (let i = 0; i < e.length; i++) {
this.columns.find((item) => {
if (item.slots.title === e[i]) {
if (item.title === e[i]) {
trfList.push(item.dataIndex)
}
})
jero-web/src/views/demo/list/JTableDemo.vue
+24 -17
View File
@@ -8,6 +8,11 @@
:columns="columns"
bordered
>
<!-- 参数必须加 {} 包裹，否则只能拿到一个对象 -->
<span slot="action" slot-scope="{text, record, index}">
text: {{ text }}- record:{{ record }}- index:{{ index }}
</span>
</j-table>
</a-card>
</template>
@@ -95,7 +100,7 @@ export default {
],
columns: [
{
// title: '姓名',
title: '姓名',
dataIndex: 'name',
key: 1,
width: 200,
@@ -108,86 +113,88 @@ export default {
fixedValue: 3,
},
// fixed: 'right'
},
{
// title: '年龄',
title: '年龄',
dataIndex: 'age',
key: 2,
width: 200,
slots: {
title: '年龄',
// title: '年龄',
fixedValue: 3,
},
sorter: (a, b) => a.age - b.age,
sorter: true,
},
{
// title: '住址',
title: '住址',
dataIndex: 'address',
key: 3,
width: 200,
// sorter: true,
slots: {
title: '住址',
// title: '住址',
fixedValue: 3,
},
sorter: (a, b) => a.address.length - b.address.length,
},
{
// title: '住址1',
title: '住址1',
dataIndex: 'address1',
key: 4,
width: 200,
slots: {
title: '住址1',
// title: '住址1',
fixedValue: 3,
},
},
{
// title: '住址2',
title: '住址2',
dataIndex: 'address2',
key: 5,
width: 200,
slots: {
title: '住址2',
// title: '住址2',
fixedValue: 3,
},
},
{
// title: '住址3',
title: '住址3',
dataIndex: 'address3',
key: 6,
width: 200,
slots: {
title: '住址3',
// title: '住址3',
fixedValue: 3,
},
},
{
// title: '住址4',
title: '住址4',
dataIndex: 'address4',
key: 7,
width: 200,
slots: {
title: '住址4',
// title: '住址4',
fixedValue: 3,
},
},
{
// title: '住址5',
title: '住址5',
dataIndex: 'address5',
key: 8,
width: 500,
slots: {
title: '住址5',
// title: '住址5',
fixedValue: 3,
},
},
{
title: '操作',
dataIndex: 'address6',
key: 9,
width: 500,
slots: {
title: '操作',
// title: '操作',
fixedValue: 3,
},
scopedSlots: { customRender: 'action' },