List组件初步

src/components/List.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="table">
+    <el-table
+      :data="listData"
+      style="width: 100%">
+      <el-table-column
+        v-if="isShowCheckbox"
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        prop="projectCode"
+        label="编号"
+        width="150">
+      </el-table-column>
+      <el-table-column
+        prop="title"
+        label="标题">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="优先级"
+        width="150">
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        label="状态"
+        width="150">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="计划时间"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="创建时间"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="经办人"
+        width="180">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="display: flex;flex-direction: row;justify-content: center;margin-top: 20px"
+      background
+      @current-change="handleCurrentChange"
+      page-size="10"
+      layout="prev, pager, next"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'List',
+  props: {
+    listData: Array,
+    total: Number,
+    isShowCheckbox: Boolean,
+  },
+  methods: {
+    handleCurrentChange(currentPage) {
+      console.log(currentPage);
+      this.$emit('current-change', currentPage);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/element-plus.ts

@@ -2,7 +2,14 @@ import {
   ElCard,
   ElCarousel,
   ElCarouselItem,
-  ElContainer, ElDivider, ElHeader, ElMain, ElRow,
+  ElContainer,
+  ElDivider,
+  ElHeader,
+  ElMain,
+  ElRow,
+  ElTable,
+  ElTableColumn,
+  ElPagination,
 } from 'element-plus';
 
 export const Components = [
@@ -14,6 +21,9 @@ export const Components = [
   ElCarouselItem,
   ElDivider,
   ElCard,
+  ElTable,
+  ElTableColumn,
+  ElPagination,
 ];
 
 export const Plugins = [];

src/views/Project/BugList.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="container">
     <button @click="showRightForm">from test</button>
+    <div></div>
+    <List
+      :listData="bugData"
+      :total="300"
+      :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange"></List>
     <RightForm ref="rightForm">
     </RightForm>
   </div>
@@ -8,19 +13,85 @@
 
 <script>
 import RightForm from '../../components/RightForm.vue';
+import List from '../../components/List.vue';
 
 export default {
-  components: { RightForm },
+  components: { RightForm, List },
+  data() {
+    return {
+      bugData: [
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        }],
+      isShowCheckbox: true,
+    };
+  },
   methods: {
+    /**
+     * @param filterObject 用于数据获取请求的参数对象
+     * @param currentPage  当前页数
+     */
+    getBugData(filterObject, currentPage) {
+      console.log('getBugData');
+    },
     showRightForm() {
       console.log(this.$refs.rightForm);
       this.$refs.rightForm.showForm();
     },
+    handleCurrentChange(currentPage) {
+      this.getBugData({}, currentPage);
+    },
   },
 };
 </script>
 
 <style scoped>
 .container{
+  width: 100%;
 }
 </style>