Vent-App/pages/operation/operation.vue

<template name="operation">
  <view>
    <!-- 其他页面内容 -->
    <OperationModel :showColum="showColum"></OperationModel>
  </view>
</template>

<script>
import OperationModel from "./operationModel.vue";
import api from "@/api/api";
export default {
  components: {
    OperationModel,
  },
  name: "operation",
  watch: {},
  data() {
    return {
      showColum: {},
    };
  },
  methods: {
    getShowColum() {
      new Promise((resolve, reject) => {
        api
          .getShowColum({})
          .then((response) => {
            if (response.data.code == 200) {
              var showlist = response.data.result;
              this.$store.commit("SET_SHOWCOLUM", showlist);
              this.showColum = showlist;
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
  },
  created() {
    this.getShowColum();
  },
  onLoad() {},
};
</script>

<style scoped>
.cu-list.grid > .cu-item {
  padding: 0px 0px;
}
.line2-icon {
  width: 60px;
  height: 60px;
}
.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #eee;
}

.tab-bar view {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.tab-bar view.active {
  background-color: #007bff;
  color: #fff;
}
</style>