mirror/vue-element-plus-admin
2
0
Fork 0
mirror of https://github.com/kailong321200875/vue-element-plus-admin.git synced 2025-02-23 11:19:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: #396

Browse Source
This commit is contained in:
kailong321200875 2024-01-09 15:08:53 +08:00
parent ef9aa62572
commit 9b2b4d42a6
2 changed files with 89 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Table/src/components/ColumnSetting.vue
View File

@ -69,7 +69,7 @@ const initColumns = (columns: TableColumn[], isReStore = false) => {
}
return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
})
if (!unref(oldColumns)) {
if (!unref(oldColumns)?.length) {
oldColumns.value = cloneDeep(newColumns)
}
settingColumns.value = cloneDeep(newColumns)
@ -96,7 +96,8 @@ watch(
initColumns(columns)
},
{
immediate: true
immediate: true,
deep: true
}
)
</script>

164
src/views/Components/Table/UseTableDemo.vue
View File

@ -3,7 +3,7 @@ import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { getTableListApi } from '@/api/table'
import { ref, reactive, unref } from 'vue'
import { ref, reactive, unref, onMounted } from 'vue'
import { ElTag } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'
import { BaseButton } from '@/components/Button'
@ -26,83 +26,91 @@ const { setProps, setColumn, getElTableExpose, addColumn, delColumn, refresh } =
const { t } = useI18n()
const columns = reactive<TableColumn[]>([
{
field: 'expand',
type: 'expand',
slots: {
default: (data: TableSlotDefault) => {
const { row } = data
return (
<div class="ml-30px">
<div>
{t('tableDemo.title')}：{row.title}
</div>
<div>
{t('tableDemo.author')}：{row.author}
</div>
<div>
{t('tableDemo.displayTime')}：{row.display_time}
</div>
</div>
)
}
}
},
{
field: 'selection',
type: 'selection'
},
{
field: 'index',
label: t('tableDemo.index'),
type: 'index'
},
{
field: 'title',
label: t('tableDemo.title')
},
{
field: 'author',
label: t('tableDemo.author')
},
{
field: 'display_time',
label: t('tableDemo.displayTime')
},
{
field: 'importance',
label: t('tableDemo.importance'),
formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
return (
<ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
{cellValue === 1
? t('tableDemo.important')
: cellValue === 2
? t('tableDemo.good')
: t('tableDemo.commonly')}
</ElTag>
)
}
},
{
field: 'pageviews',
label: t('tableDemo.pageviews')
},
{
field: 'action',
label: t('tableDemo.action'),
slots: {
default: (data) => {
return (
<BaseButton type="primary" onClick={() => actionFn(data)}>
{t('tableDemo.action')}
</BaseButton>
)
}
}
}
])
const columns = reactive<TableColumn[]>([])
onMounted(() => {
setTimeout(() => {
setProps({
columns: [
{
field: 'expand',
type: 'expand',
slots: {
default: (data: TableSlotDefault) => {
const { row } = data
return (
<div class="ml-30px">
<div>
{t('tableDemo.title')}：{row.title}
</div>
<div>
{t('tableDemo.author')}：{row.author}
</div>
<div>
{t('tableDemo.displayTime')}：{row.display_time}
</div>
</div>
)
}
}
},
{
field: 'selection',
type: 'selection'
},
{
field: 'index',
label: t('tableDemo.index'),
type: 'index'
},
{
field: 'title',
label: t('tableDemo.title')
},
{
field: 'author',
label: t('tableDemo.author')
},
{
field: 'display_time',
label: t('tableDemo.displayTime')
},
{
field: 'importance',
label: t('tableDemo.importance'),
formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
return (
<ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
{cellValue === 1
? t('tableDemo.important')
: cellValue === 2
? t('tableDemo.good')
: t('tableDemo.commonly')}
</ElTag>
)
}
},
{
field: 'pageviews',
label: t('tableDemo.pageviews')
},
{
field: 'action',
label: t('tableDemo.action'),
slots: {
default: (data) => {
return (
<BaseButton type="primary" onClick={() => actionFn(data)}>
{t('tableDemo.action')}
</BaseButton>
)
}
}
}
]
})
}, 2000)
})
const actionFn = (data: TableSlotDefault) => {
console.log(data)