我的账户调整

src/SDrpManagement/myaccountclass/index.vue

@@ -36,27 +36,29 @@
               </el-input>
             </div>
           </template>
-          <tableLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true" :fixedName="'operation'" height="calc(100vh - 390px)">
-            <template v-slot:customcol="scope">
-              <div v-if="scope.column.columnname == 'type'">
-                {{ scope.column.data.type ? '收入凭证' : '支出凭证' }}
-              </div>
-              <div v-else>
-                {{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]]:'--'}}
-              </div>
-            </template>
-            <template v-slot:opreation="scope">
-              <editPrice v-if="tool.checkAuth($route.name,'update')" class="inline-16" :data="scope.data"/>
-              <delete-btn 
-                @deleteCreate="deleteCreate" 
-                v-if="tool.checkAuth($route.name,'delete')" 
-                :id="scope.data.sa_itempriceadjust_itemsid" 
-                @deleteSuccess="$refs.basicLayout.listData()" 
-                nameId="20221025095404" 
-                nameKey="sa_itempriceadjust_itemsids"
-              />
-            </template>
-          </tableLayout>
+          <div style="flex:0 1 auto;width: 100%;">
+            <tableMainLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true" :fixedName="'operation'" height="calc(100vh - 390px)">
+              <template v-slot:customcol="scope">
+                <div v-if="scope.column.columnname == 'type'">
+                  {{ scope.column.data.type ? '收入凭证' : '支出凭证' }}
+                </div>
+                <div v-else>
+                  {{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]]:'--'}}
+                </div>
+              </template>
+              <template v-slot:opreation="scope">
+                <editPrice v-if="tool.checkAuth($route.name,'update')" class="inline-16" :data="scope.data"/>
+                <delete-btn
+                    @deleteCreate="deleteCreate"
+                    v-if="tool.checkAuth($route.name,'delete')"
+                    :id="scope.data.sa_itempriceadjust_itemsid"
+                    @deleteSuccess="$refs.basicLayout.listData()"
+                    nameId="20221025095404"
+                    nameKey="sa_itempriceadjust_itemsids"
+                />
+              </template>
+            </tableMainLayout>
+          </div>
           <div style="margin-top:16px;text-align:right">
             <el-pagination
               background
@@ -111,7 +113,7 @@ export default {
       })
       this.acountlist = res.data
       console.log(this.acountlist);
-      
+
       this.accountMx()
     },
     async accountMx () {
@@ -166,4 +168,4 @@ export default {
   border-radius: 5px;
   cursor: pointer;
 }
-</style>
+</style>

src/main.js

@@ -19,6 +19,7 @@ import './style/theme/index.css'
 import tableLayout from './components/dynamic-table'
 import tableNewLayout from './components/dynamic-newTable'
 import basicLayout from './components/normal-basic-layout'
+import tableMainLayout from './template/tableMainLayout'
 import normalLayout from './components/normal-basic-layout/normal.vue'
 import basicDetails from './components/normal-basic-layout/details'
 import deleteBtn from './components/delete_btn/index'
@@ -53,6 +54,8 @@ Vue.component('tableLayout', tableLayout)
 
 Vue.component('tableNewLayout',tableNewLayout)
 
+Vue.component('tableMainLayout',tableMainLayout)
+
 Vue.component('basicLayout', basicLayout)
 
 Vue.component('basicDetails', basicDetails)

src/template/tableMainLayout/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="bs-table" :style="{height:height?height:'calc(100vh - 330px)'}">
+    <el-table border stripe ref="tables" :row-class-name="tableClassName" :header-cell-style="{background:'#fafafafa',height:'40px','color':'#000000'}" highlight-current-row :data="data" size="mini" @row-click="rowClick" height="100%" style="width:100%;" @selection-change="handleSelectionChange" >
+      <!-- <div slot="empty">
+        <el-empty :image="require('../../../assets/empty.svg')" :image-size="250">
+        </el-empty>
+      </div> -->
+<!--      <el-table-column
+          type="selection"
+          width="45"
+          align="center"
+          @handleSelectionChange="handleSelectionChange">
+      </el-table-column>-->
+      <el-table-column show-overflow-tooltip v-for="(col) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :width="col.width ? col.width : 0" :min-width="col.width === 0 ? 150 : col.width" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?redirect ? redirect : 'right' :false : false">
+        <template slot-scope="scope">
+
+          <slot v-if="col.columnname !== 'operation'" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
+
+          <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column  v-for="(col) in layout" :key="col.tablecolid">
+        <template #header>
+
+          <el-input v-if="col.filter === 1" size="mini" v-model="col.value" @change="inputChange" @keyup.native.enter="headerSearch(col.columnname)" @clear="headerSearch(col.columnname)" clearable/>
+
+
+        <slot v-if="col.filter === 2" name="temp" :data="col.columnname"></slot>
+
+        </template>
+        <el-table-column :prop="col.columnname" :label="col.title" :width="col.width ? col.width : 0" :min-width="col.width === 0 ? 150 : col.width" :fixed="checkFixed(col.columnname)">
+          <template slot-scope="scope">
+            <slot v-if="col.columnname !== 'operation'" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
+            <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
+          </template>
+        </el-table-column>
+
+
+      </el-table-column> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex"
+export default {
+  /*
+    layout:表结构数据;
+    data:表渲染数据;
+    custom:是否启用自定义结构;
+    opwidth:操作列宽度
+  */
+  props:['data','tableName','custom','layout','fixRightData','fixLeftData','height','fixedName','redirect'],
+  data () {
+    return {
+      list:[],
+      act_column:'',
+      value:'',
+      show:false
+    }
+  },
+  computed:{
+    ...mapGetters({
+      loading:'loading'
+    })
+  },
+  watch:{
+    tableName () {
+      this.$nextTick(() => {
+        this.$refs.tables.doLayout()
+      });
+    },
+    data(){
+      this.$nextTick(() => {
+        this.$refs.tables.doLayout()
+      });
+    }
+  },
+  methods:{
+    rowClick (row) {
+      this.$emit('rowClick',row)
+    },
+    tableClassName ({row,rowIndex}) {
+      row.index = rowIndex
+    },
+    handleSelectionChange(val) {
+      this.$emit('checkboxCallBack',val)
+    },
+    checkFixed (columnname) {
+      let isRight = this.fixRightData.some(item=>item === columnname)
+      let isLeft = this.fixLeftData.some(item=>item === columnname)
+      if (isRight) return 'right'
+      if (isLeft) return 'left'
+    },
+    headerSearch (columnname) {
+      this.show = false
+      this.$emit('headerSearch',columnname,this.value)
+    },
+    inputChange (val) {
+      this.value = val
+    }
+  },
+  mounted () {
+  }
+}
+
+</script>
+<style>
+/* .bs-table .el-table {
+  display: flex;
+  flex-direction: column;
+} */
+</style>
+<style scoped>
+.search-icon:hover{
+  font-weight: bold;
+  background: #f1f2f3;
+  cursor: pointer;
+}
+
+/deep/.ellipsis {
+  display:-webkit-box;
+  text-overflow:ellipsis;
+  overflow:hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient:vertical;
+}
+
+/deep/.el-table--mini .el-table__cell {
+  padding: 0 !important;
+}
+/deep/.el-table .el-table__cell {
+  padding: 0 !important;
+}
+</style>