This commit is contained in:
make
2025-04-12 15:14:45 +08:00
parent 4a1ead3340
commit a1c507eaf1
11 changed files with 706 additions and 232 deletions

View File

@@ -1,113 +0,0 @@
<template>
<div class="table-box">
<ProTable
ref="proTable"
highlight-current-row
:columns="columns"
:request-api="getTableList"
:data-callback="dataCallback"
row-key="id"
:indent="20"
:search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
>
</ProTable>
</div>
</template>
<script setup lang="tsx" name="complexProTable">
import { reactive, ref } from "vue";
import { nvYouList } from "@/api/interface/video/nvyou";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getList } from "@/api/modules/video/nvyou";
import { h } from "vue";
import { AsyncImageComponent } from "@/utils/decrypt";
// ProTable 实例
const proTable = ref<ProTableInstance>();
const initParam = reactive({
limit: 15,
page: 1
});
const dataCallback = (data: any) => {
return {
items: data.items,
total: data.total,
total_page: data.total_pages,
page: initParam.page,
limit: initParam.limit
};
};
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params));
initParam.page = newParams.page;
initParam.limit = newParams.limit;
return getList(newParams);
};
// 表格配置项
const columns = reactive<ColumnProps<nvYouList.ResList>[]>([
{ type: "selection", fixed: "left", width: 50 },
{
prop: "key",
label: "搜索内容",
isShow: false,
search: {
el: "input"
}
},
{
prop: "ny_id",
label: "ID",
width: 100
},
{
prop: "ny_name",
label: "名称"
},
{
prop: "ny_pinyin",
label: "拼音"
},
{
prop: "ny_cover_url",
label: "女优封面",
width: 120,
render(scope) {
return h(AsyncImageComponent, { url: scope.row.ny_cover_url });
}
},
{
prop: "ny_zhaobei",
label: "罩杯"
},
{
prop: "ny_yaowei",
label: "腰围"
},
{
prop: "ny_biwei",
label: "臂围"
},
{
prop: "ny_shengao",
label: "身高"
},
{
prop: "ny_chushengriqi",
label: "出生"
},
{
prop: "ny_chudaonianfen",
label: "出道"
},
{
prop: "ny_jieshao",
label: "描述",
width: 250
}
]);
</script>