liwei

src/components/subList/index.vue

 <template>
   <div class="integral-page">
-    <el-form ref="searchFrom" :model="searchFrom" style="padding-top:20px;" label-width="80px" inline>
+    <el-form
+      ref="searchFrom"
+      :model="searchFrom"
+      style="padding-top:20px;"
+      label-width="80px"
+      inline
+    >
       <el-form-item label="主账户ID">
         <el-input v-model="searchFrom.user_id"></el-input>
       </el-form-item>
@@ -11,126 +17,119 @@
         <el-button type="primary" plain @click="getUser">搜索</el-button>
       </el-form-item>
     </el-form>
-    <el-table
-      :data="userList"
-      style="width: 100%">
-      <el-table-column
-        className="f-c"
-        label="主账户">
+    <el-table :data="userList" :style="{width: width+'px'}">
+      <el-table-column class="f-c" label="主账户">
         <template slot-scope="scope">
-          <img class="avatar" :src="scope.row.user_avatar">{{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
+          <img class="avatar" :src="scope.row.user_avatar" />
+          {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
         </template>
       </el-table-column>
-      <el-table-column
-        className="f-c"
-        label="子账户">
+      <el-table-column class="f-c" label="子账户">
         <template slot-scope="scope">
-          <img class="avatar" :src="scope.row.sub_user_avatar">{{scope.row.sub_user_nickname}}(ID:{{scope.row.sub_user_id}})
+          <img class="avatar" :src="scope.row.sub_user_avatar" />
+          {{scope.row.sub_user_nickname}}(ID:{{scope.row.sub_user_id}})
         </template>
       </el-table-column>
-      <el-table-column
-        prop="created_at"
-        label="绑定时间">
-      </el-table-column>
-      <el-table-column
-        prop="unbind_at"
-        label="解绑时间">
-         <template slot-scope="scope">
-           {{scope.row.unbind_at=='0000-00-00 00:00:00'?'未解绑':scope.row.unbind_at}}
-        </template>
+      <el-table-column prop="created_at" label="绑定时间"></el-table-column>
+      <el-table-column prop="unbind_at" label="解绑时间">
+        <template
+          slot-scope="scope"
+        >{{scope.row.unbind_at=='0000-00-00 00:00:00'?'未解绑':scope.row.unbind_at}}</template>
       </el-table-column>
     </el-table>
-    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
+    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange" />
   </div>
 </template>
 
 <script>
-  import {getSubAccountListApi,getOldListApi} from "../../service/api";
-  import {INTEGRALTYPE,INTEGRALFUN} from "../../util/wordbook";
-  import page from '../framework/page'
-  export default {
+import { getSubAccountListApi, getOldListApi } from "../../service/api";
+import { INTEGRALTYPE, INTEGRALFUN } from "../../util/wordbook";
+import page from "../framework/page";
+export default {
   name: "index",
   components: {
     page
   },
-    data(){
+  data() {
     let is_addOption = [];
-      for(let k in INTEGRALTYPE){
-        is_addOption.push({id:k,value:INTEGRALTYPE[k]})
+    for (let k in INTEGRALTYPE) {
+      is_addOption.push({ id: k, value: INTEGRALTYPE[k] });
     }
     let sourceOption = [];
-      for(let j in INTEGRALFUN){
-        sourceOption.push({id:j,value:INTEGRALFUN[j]})
+    for (let j in INTEGRALFUN) {
+      sourceOption.push({ id: j, value: INTEGRALFUN[j] });
     }
     return {
-        searchFrom:{
-          user_id:'',
-          sub_user_id:""
+      width: 0,
+      searchFrom: {
+        user_id: "",
+        sub_user_id: ""
       },
-        userList:[],
-        total:0,
-        nowPage:1,
+      userList: [],
+      total: 0,
+      nowPage: 1,
       limit: 10,
-        showDetail:false
-      }
+      showDetail: false
+    };
   },
-    mounted(){
-      this.getUser()
+  mounted() {
+    this.getUser();
+    this.width = window.innerWidth - 200;
   },
-    filters:{
-      INTEGRALTYPE(value){
-        return INTEGRALTYPE[value]
+  filters: {
+    INTEGRALTYPE(value) {
+      return INTEGRALTYPE[value];
     },
-      INTEGRALFUN(value){
-        return INTEGRALFUN[value]
+    INTEGRALFUN(value) {
+      return INTEGRALFUN[value];
     }
   },
-    methods:{
-       onPageChange(val){
-        this.nowPage = val
-        this.getUser()
+  methods: {
+    onPageChange(val) {
+      this.nowPage = val;
+      this.getUser();
     },
-      onSizeChange(val){
+    onSizeChange(val) {
       this.limit = val;
       this.nowPage = 1;
-        this.getUser()
+      this.getUser();
     },
-      getUser(){
+    getUser() {
       let json = {
         page: this.nowPage,
         limit: this.limit
-        }
+      };
       if (this.searchFrom.user_id) {
-          json.user_id = this.searchFrom.user_id
+        json.user_id = this.searchFrom.user_id;
       }
       if (this.searchFrom.sub_user_id) {
-            json.sub_user_id = this.searchFrom.sub_user_id
+        json.sub_user_id = this.searchFrom.sub_user_id;
       }
-        getSubAccountListApi(json).then(res=>{
+      getSubAccountListApi(json).then(res => {
         this.userList = res.list;
-          this.total = res.total
-        })
-      }
+        this.total = res.total;
+      });
     }
   }
+};
 </script>
 
 <style scoped lang="less">
-  @import "../../util/public";
-  .avatar{
+@import "../../util/public";
+.avatar {
   width: 50px;
   min-width: 50px;
   height: 50px;
   margin-right: 5px;
   border-radius: 50%;
-  }
+}
 </style>
 
 <style>
-  .f-c > .cell {
+.f-c > .cell {
   display: flex !important;
   flex-flow: row;
   justify-content: flex-start;
   align-items: center;
-  }
+}
 </style>