92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<div class="table-box">
|
|
<ProTable
|
|
ref="proTable"
|
|
highlight-current-row
|
|
:columns="columns"
|
|
:request-api="getTableList"
|
|
:data-callback="dataCallback"
|
|
>
|
|
</ProTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="tsx" name="complexProTable">
|
|
import { reactive, ref } from "vue";
|
|
import ProTable from "@/components/ProTable/index.vue";
|
|
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
|
import { ChapterList } from "@/api/interface/novel/chapter";
|
|
import { getList } from "@/api/modules/novel/chapter";
|
|
|
|
// 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<ChapterList.ResList>[]>([
|
|
{ type: "selection", fixed: "left", width: 50 },
|
|
{
|
|
prop: "key",
|
|
label: "搜索内容",
|
|
isShow: false,
|
|
search: {
|
|
el: "input"
|
|
}
|
|
},
|
|
{
|
|
prop: "xszj_id",
|
|
label: "ID",
|
|
width: 80
|
|
},
|
|
{
|
|
prop: "xszj_pai_xu",
|
|
label: "章节序号",
|
|
width: 100
|
|
},
|
|
{
|
|
prop: "xszj_ming_zi",
|
|
label: "章节标题"
|
|
},
|
|
{
|
|
prop: "xszj_nei_rong",
|
|
label: "章节内容",
|
|
showOverflowTooltip: true,
|
|
render(scope) {
|
|
return (
|
|
<div class="fixed-width" v-html={scope.row.xszj_nei_rong}>
|
|
{scope.row.xszj_nei_rong}
|
|
</div>
|
|
);
|
|
}
|
|
},
|
|
{ prop: "created_at", label: "添加时间", width: 170 }
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.el-upload--picture-card {
|
|
display: none;
|
|
}
|
|
</style>
|