table

src/view/dialog/dialog.vue

@@ -1,87 +1,156 @@
 <template>
-    <div class="dialogPage">
+  <div class="dialogPage">
-        <el-dialog v-model="dialogShow" width="80vw" :show-close="false" center :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-dialog
-            <template #header="{ close, titleId, titleClass }">
+      v-model="dialogShow"
-                <div class="my-header">
+      width="80vw"
-                    <el-icon size="26" color="#fff" @click="closeDialog">
+      :show-close="false"
-                        <CircleCloseFilled />
+      center
-                    </el-icon>
+      :close-on-click-modal="false"
-                </div>
+      :close-on-press-escape="false"
-            </template>
+    >
-            <div class="tabelPart">
+      <template #header="{ close, titleId, titleClass }">
-                <el-table :data="data.tableData " height='calc(100% - 40px)' :header-cell-style="{ background: '#008FCD' }">
+        <div class="my-header">
-                    <el-table-column v-for="(item,index) in data.columns" :key="index" :property="item.property" :label="item.label" :width="item.width" align="center" />
+          <el-icon size="26" color="#fff" @click="closeDialog">
-                </el-table>
+            <CircleCloseFilled />
-                <div class="pagePart">
+          </el-icon>
-                    <el-pagination background layout="prev, pager, next" :total="1000" prev-text="上一页"
+        </div>
-                        next-text="下一页" />
+      </template>
-                </div>
+      <div class="tabelPart">
-            </div>
+        <el-table
-
+          :data="data.tableData"
-        </el-dialog>
+          height="calc(100% - 40px)"
-    </div>
+          :header-cell-style="{ background: '#008FCD' }"
+        >
+          <!-- <el-table-column
+            v-for="(item, index) in data.columns"
+            :key="index"
+            :property="item.property"
+            :label="item.label"
+            :width="item.width"
+            align="center"
+          /> -->
+          <template v-for="item in data.columns">
+            <el-table-column
+              :key="item.label"
+              v-if="item.type === 'slot'"
+              :width="item.width"
+              :label="item.label"
+              :property="item.property"
+              align="center"
+            >
+              <template #default="scope">
+                <slot
+                  :name="item.property"
+                  :currentCol="item"
+                  :currentData="scope.row"
+                ></slot>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :key="item.label"
+              :property="item.property"
+              :label="item.label"
+              :width="item.width"
+              align="center"
+              v-else
+            />
+          </template>
+        </el-table>
+        <div class="pagePart">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            prev-text="上一页"
+            next-text="下一页"
+            @current-change="handle"
+            v-model:current-page="pagination.currentPage"
+          />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script setup>
-import { onMounted, reactive, ref, onBeforeMount, defineProps, watch } from "vue";
+import {
-import { CircleCloseFilled } from '@element-plus/icons-vue'
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
 
 const props = defineProps({
-    dialogShow: {
+  dialogShow: {
-        type: Boolean,
+    type: Boolean,
-        default: () => {
+    default: () => {
-            return false;
+      return false;
-        },
     },
-    columns: {
+  },
-        type: Array,
+  columns: {
-        default: () => {
+    type: Array,
-            return [];
+    default: () => {
-        },
+      return [];
     },
-    tableData: {
+  },
-        type: Array,
+  tableData: {
-        default: () => {
+    type: Array,
-            return [];
+    default: () => {
-        },
+      return [];
     },
-    title: {
+  },
-        type: String,
+  title: {
-        default: () => {
+    type: String,
-            return '';
+    default: () => {
-        },
+      return "";
     },
+  },
+  pagination: {
+    type: Object,
+    required: true,
+  },
 });
-const emit = defineEmits([
+const emit = defineEmits(["close", "handle"]);
-  "close",
-]);
 
 // 详情弹框
-const dialogShow = ref()
+const dialogShow = ref();
-const data = reactive ({
+const data = reactive({
-    title: '',
+  title: "",
-    columns: [],
+  columns: [],
-    tableData: [],
+  tableData: [],
-})
+  pagination: {},
+});
 
-const gridData = [
+const gridData = [];
-]
 
-watch(() => props.dialogShow, (newVal, oldVal) => {
+watch(
-    dialogShow.value = newVal
+  () => props.dialogShow,
-})
+  (newVal, oldVal) => {
+    dialogShow.value = newVal;
+    data.tableData = props.tableData;
+    data.columns = props.columns;
+  }
+);
 
 // 使用生命钩子
 onMounted(() => {
-    dialogShow.value = props.dialogShow
+  dialogShow.value = props.dialogShow;
-    data.columns = props.columns
+  data.columns = props.columns;
-    data.title = props.title
+  data.title = props.title;
-    data.tableData = props.tableData
+  data.tableData = props.tableData;
 });
 
 const closeDialog = () => {
-    dialogShow.value = false
+  dialogShow.value = false;
-    emit("close");
+  emit("close");
-}
+};
+//分页器
+const handle = (current) => {
+  emit("handle", current);
+};
 </script>
 <style lang="scss" scoped>
 :deep(.el-dialog) {
@@ -96,10 +165,25 @@ const closeDialog = () => {
 .tabelPart {
   height: 60vh;
   padding: 16px;
-  background: linear-gradient(270deg, rgba(0, 77, 131, 0.69) 0%, rgba(0, 51, 83, 0.77) 50%, rgba(0, 77, 131, 0.74) 100%), radial-gradient(66% 40% at 50% 0%, rgba(1, 150, 243, 0.55) 0%, rgba(0, 116, 255, 0) 100%);
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
   box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
   border: 2px solid;
-  border-image: linear-gradient(180deg, rgba(21, 150, 255, 1), rgba(0, 157, 227, 0)) 2 2;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
 
   :deep(.el-table) {
     --el-table-bg-color: none;
@@ -117,14 +201,14 @@ const closeDialog = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  :deep(.el-pagination){
+  :deep(.el-pagination) {
     --el-pagination-button-disabled-bg-color: none;
     --el-pagination-bg-color: none;
     --el-pagination-button-bg-color: none;
     --el-pagination-button-color: #fff;
     color: #fff;
   }
-  :deep(.el-pagination button:disabled){
+  :deep(.el-pagination button:disabled) {
     background-color: rgba(0, 116, 255, 0) !important;
   }
 }

src/view/sy.vue

@@ -430,8 +430,13 @@
       :columns="tableType.columns"
       :title="tableType.title"
       :tableData="tableType.data"
+      :pagination="pagination"
       @close="close"
+      @handle="handlePagination"
     >
+         <template #yxstatus="{ currentCol, currentData }">
+        <div>-------------</div>
+      </template>
     </Dialog>
   </div>
 </template>
@@ -462,9 +467,93 @@ import { columns } from "element-plus/es/components/table-v2/src/common.mjs";
 
 // 详情弹框
 const dialogShow = ref(false);
-const tableType = reactive({
+//表格列
-  title: "",
+const columnss = reactive({
-  columns: [
+  就业培训: [
+    {
+      label: "姓名",
+      property: "name",
+  
+    },
+    {
+      label: "单位",
+      property: "name",
+  
+    },
+    {
+      label: "职业",
+      property: "name",
+  
+    },
+    {
+      label: "承办机构",
+      property: "name",
+  
+    },
+    {
+      label: "培训班名称",
+      property: "name",
+    
+    },
+    {
+      label: "培训开始时间",
+      property: "name",
+ 
+    },
+    {
+      label: "培训结束时间",
+      property: "name",
+
+    },
+  ],
+  就业见习服务: [
+    {
+      label: "见习岗位名称",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "单位名称",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "岗位类型",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "接受人数",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "见习地点",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "见习月数",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "学历要求",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "专业",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "有效状态",
+      property: "yxstatus",
+      type:'slot',
+    },
+  ],
+  就业援助: [
     {
       label: "姓名",
       property: "name",
@@ -472,22 +561,51 @@ const tableType = reactive({
     },
     {
       label: "人员类别",
-      property: "type",
+      property: "name",
       width: "150",
     },
     {
       label: "就失业状态",
-      property: "status",
+      property: "name",
       width: "150",
     },
     {
-      label: "日期",
+      label: "优先指数",
-      property: "date",
+      property: "name",
+      width: "150",
     },
     {
-      label: "地址",
+      label: "是否已帮扶",
-      property: "address",
+      property: "name",
+      width: "150",
     },
+    {
+      label: "失业登记时间",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "失业登记管辖地",
+      property: "name",
+      width: "150",
+    },
+    {
+      label: "户籍地",
+      property: "name",
+    },
+    {
+      label: "居住地",
+      property: "name",
+    },
+      {
+      label: "帮扶时间",
+      property: "name",
+    },
+  ],
+});
+const tableType = reactive({
+  title: "",
+  columns: [
   ],
   data: [
     {
@@ -512,10 +630,59 @@ const tableType = reactive({
     },
   ],
 });
-
+const tabledata = reactive({
+  就业培训: [
+    {
+      date: "2016-05-02",
+      name: "John Smith",
+      address: "No.1518,  Jinshajiang Road, Putuo District",
+    },
+    {
+      date: "2016-05-04",
+      name: "John Smith",
+      address: "No.1518,  Jinshajiang Road, Putuo District",
+    },
+  ],
+  就业见习服务: [
+    {
+      date: "2016-05-02",
+      name: "张三",
+      address: "No.1518,  Jinshajiang Road, Putuo District",
+    },
+    {
+      date: "2016-05-04",
+      name: "李四",
+      address: "No.1518,  Jinshajiang Road, Putuo District",
+    },
+  ],
+  就业援助: [
+    {
+      date: "2016-05-02",
+      name: "1",
+      address: "No.1518,  Jinshajiang Road, Putuo District",
+    },
+    {
+      date: "2016-05-04",
+      name: "2",
+      address: "No.1518,  Jinshajiang Road, Putuo District",
+    },
+  ],
+});
+// 表格分页
+const pagination = reactive({
+  total: 100,
+  pageSize: 20,
+  currentPage: 1,
+});
+const handlePagination = (current) => {
+  console.log(current);
+};
 const showDialog = (title) => {
   dialogShow.value = true;
   tableType.title = title;
+  tableType.data = tabledata[title];
+  tableType.columns=columnss[title];
+  pagination.currentPage = 1;
 };
 
 const close = () => {