自定义组件

2021-09-29 14:47:14 +08:00
parent c760d4a90f
commit 94feaf18a2
3 changed files with 202 additions and 6 deletions
@@ -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>