自定义组件

src/components/CustomizeTable.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="custom-table">
+    <!--表头-->
+    <div class="table-head">
+     <div class="table-head-columns">
+       <span  v-for="(item,index) of columns" :key="index">{{item.title}}</span>
+     </div>
+
+    </div>
+    <section class="table-data">
+      <div class="table-data-item" v-for="(item,index) of dataSource" :key="index">
+        <div class="table-data-item-top"></div>
+        <div class="table-data-item-data">
+          <span style="width: 200px"></span>
+           <div class="list-item">
+             <span v-for="colVal of columns" :key="colVal.id">
+<!--               <slot  :name="colVal[scopedSlots.customRender]">{{item[colVal.dataIndex]}}123415</slot>-->
+<!--               <slot :name="colVal[scopedSlots]">{{item[colVal.dataIndex]}}</slot>-->
+               <slot :name="colVal.scopedSlots" :record="item">{{item[colVal.dataIndex]}}</slot>
+             </span>
+           </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomizeTable',
+  props: {
+    // 表头
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 数据
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.custom-table {
+  width: 100%;
+  min-width: 1000px;
+  overflow: auto;
+}
+
+.table-head {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background: #f0f1f2;
+  box-shadow: -1px 0px 0px 0px #e3e3e5;
+  &-columns {
+    user-select: none;
+    width: calc(100% - 200px);
+    float: right;
+    display: flex;
+    justify-content:space-around;
+  }
+}
+
+.table-data {
+
+  &-item {
+    border: 1px solid #d5d5d5;
+    margin: 10px 0;
+    &-top {
+      width: 100%;
+      height: 61px;
+      background: #f0f1f2;
+      box-shadow: -1px 0px 0px 0px #e3e3e5;
+    }
+    &-data {
+      display: flex;
+      justify-content: space-around;
+      height: 61px;
+      line-height: 61px;
+      .list-item {
+        flex: 1;
+        display: flex;
+        justify-content: space-around;
+      }
+    }
+  }
+}
+
+</style>

src/views/dataMember/DataMember.vue

@@ -1,13 +1,102 @@
 <template>
-  <div>资料网员</div>
+  <div class="data-member">
+    <customize-table
+      :columns="columns"
+      :data-source="dataSource"
+    >
+     <template v-slot:text="record">
+       <div @click="d(record)">点击</div>
+     </template>
+    </customize-table>
+  </div>
 </template>
 <script>
+import CustomizeTable from '@comp/CustomizeTable'
+
 export default {
   name: 'DataMember',
-  data() {
-    return {}
+  components: {
+    CustomizeTable
   },
-  methods: {}
+  data() {
+    return {
+      columns: [
+        {
+          title: '应付金额',
+          dataIndex: 'itemText1',
+          scopedSlots:  'default'
+        },
+        {
+          title: '实付金额',
+          dataIndex: 'itemText2',
+          scopedSlots:  'text'
+        },
+        {
+          title: '负责人',
+          dataIndex: 'itemText3',
+          scopedSlots:  'text'
+        },
+        {
+          title: '打包',
+          dataIndex: 'itemText4',
+          scopedSlots:  'text'
+        },
+        {
+          title: '需要发票',
+          dataIndex: 'itemText5',
+          scopedSlots:  'text'
+        },
+        {
+          title: '到账',
+          dataIndex: 'itemText6',
+          scopedSlots:  'text'
+        },
+        {
+          title: '开票',
+          dataIndex: 'itemText7',
+          scopedSlots:  'text'
+        },
+        {
+          title: '邮寄',
+          dataIndex: 'itemText8',
+          scopedSlots:  'text'
+        },
+      ],
+      dataSource:[
+        {
+          itemText1:'应收金额1',
+          itemText2:'实付金额1',
+          itemText3:'负责人1',
+          itemText4:'打包1',
+          itemText5:'需要发票1',
+          itemText6:'到账1',
+          itemText7:'开票1',
+          itemText8:'开票18',
+        },
+        {
+          itemText1:'应收金额1',
+          itemText3:'负责人1',
+          itemText4:'打包1',
+          itemText7:'开票1',
+          itemText5:'需要发票1',
+          itemText6:'到账1',
+          itemText2:'实付金额1',
+          itemText8:'开票18',
+        },
+      ]
+    }
+  },
+  methods: {
+    d(val){
+      console.log(val)
+    }
+  }
 }
 </script>
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.data-member {
+  padding: 20px;
+  width: 100%;
+  background: #fff;
+}
+</style>

src/views/meetingActivity/MeetingActivity.vue

@@ -89,6 +89,11 @@
            <!--          <img class="meeting-img-status" src="../../assets/meetingImgs/ing.png" />-->
            <!--          <img class="meeting-img-status" src="../../assets/meetingImgs/end.png.png" />-->
          </div>
+         <i></i>
+         <i></i>
+         <i></i>
+         <i></i>
+         <i></i>
        </div>
         <section v-else class="list">
           <a-empty/>
@@ -181,6 +186,7 @@ export default {
     * */
     filterMeeting(key) {
       this.meetingKey = key
+      this.initData(1,key)
     },
     /*
      *  分页
@@ -202,7 +208,7 @@ export default {
     /*
     * 初始化加载数据
     * */
-    initData(arg) {
+    initData(arg,key) {
       if (!this.url.list) {
         this.$message.error('请设置url.list属性!')
         return
@@ -211,6 +217,10 @@ export default {
       if (arg === 1) {
         this.pageNo = 1
       }
+      // 修改会议状态参数
+      if(key){
+        this.queryParam.meetingStatus = key
+      }
       var params = Object.assign({}, this.lastQueryParam)
       params.pageNo = this.pageNo
       params.pageSize = this.pageSize
@@ -298,6 +308,7 @@ export default {
 }
 
 .inactive-status {
+  user-select: none;
   padding: 0 20px;
   cursor: pointer;
 }
@@ -312,6 +323,9 @@ export default {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  & > i {
+    width: 323px;
+  }
 }
 .item-meeting {
   position: relative;