'产说会需求'

src/components/ebiz/productionSay/statisticsTable.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="statisticsTable">
+    <table cellspacing="0" summary cellpadding="1">
+      <thead>
+        <tr>
+          <th :class="{'th-fixed':index<1}" v-for="(item,index) in theads" :key="index">{{item}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableData" :key="index">
+          <td :class="isLink?'td-fixed':'th-fixed'" @click="goLink(item)">{{item.convokeOrgCn}}</td>
+          <td>{{item.splan}}</td>
+          <td>{{item.estimatePeople}}</td>
+          <td>{{item.estimatePremium}}</td>
+          <td>{{item.rplan}}</td>
+          <td>{{item.realityPeople}}</td>
+          <td>{{item.estimateGetPremium}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'statisticsTable',
+  props:{
+      theads:{
+          type:Array,
+          default:[]
+      },
+      isLink:{
+          type:Boolean,
+          default:false,
+      },
+      tableData:{
+          type:Array,
+          default:[]
+      }
+  },
+  data() {
+    return {
+    }
+  },
+  created(){
+  },
+  methods: {
+      goLink(item){
+          if(this.isLink){
+              this.$emit('goLink',item)
+          }
+      },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.statisticsTable th {
+  width: 100px;
+}
+table {
+  width: 160vw;
+}
+.statisticsTable {
+  width: 100%;
+  table {
+    border-collapse: collapse;
+  }
+
+  table,
+  th,
+  td {
+    border: 1px solid #999;
+    text-align: center;
+    font-size: 14px;
+    line-height: 30px;
+    background:#fff;
+  }
+  thead {
+    th {
+      height: 40px;
+      line-height: 40px;
+      background: #e9332e;
+      color: #fff;
+    }
+  }
+}
+.th-fixed {
+  position: sticky;
+  left: 0;
+  width:200px;
+  padding: 0 5px;
+}
+.td-fixed {
+  position: sticky;
+  width:200px;
+  padding: 0 5px;
+  left: 0;
+  text-decoration: underline;
+}
+</style>