【修改】JTable传参问题修改
This commit is contained in:
zer0Black
@@ -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)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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' },
|
||||
|
||||
Reference in New Issue
Block a user