20230708----重返学习-通用物模型基础样式

最新推荐文章于 2024-07-22 14:10:07 发布
最新推荐文章于 2024-07-22 14:10:07 发布
阅读量136 收藏
点赞数
分类专栏： vue 重返学习 文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/131618056
版权

day-108-one-hundred-and-eight-20230708-通用物模型基础样式

通用物模型

通用物模型基础

  1. 先扒接口。
  2. 相关接口写在一起。
  3. 对一些数据进行缓存，如果是接口的，也可以改造接口让其可以把数据存储在本地。
相关接口分模块

  • 核心代码：

    • fang/f20230708/ManageSystem/src/api/iot.js

      import http from "./http";

// 获取物模型类别信息。
/* //物模型类别-get
/system/dict/data/type/iot_things_type
*/
const queryIotThingsType = () => http.get(`/system/dict/data/type/iot_things_type`);

export default {
  queryIotThingsType,
};

    • fang/f20230708/ManageSystem/src/api/index.js

      import iot from "./iot";

/* 暴露API */
const API = {
  iot, //this.$API.ito.xxxx来调用。
};
export default API;

  • 代码：

    • fang/f20230708/ManageSystem/src/api/iot.js

      import http from "./http";
import store from "@/store";
import ut from "@/assets/utils";

// 获取物模型类别信息。
/* //物模型类别-get
/system/dict/data/type/iot_things_type
*/
const queryIotThingsType = async () => {
  let cache = ut.storage.get("cache_iot_things_type");
  if (cache) {
    return cache;
  }

  //没有缓存，向服务器发送请求。
  let arr = [];
  try {
    let { code, data } = await http.get(
      `/system/dict/data/type/iot_things_type`
    );
    if (+code === 200) {
      //把服务器返回的数据变为自己需要的。
      arr = data.map((item) => {
        return {
          lable: item.dictLabel,
          value: item.dictValue,
          class: item.listClass,
        };
      });
    }

    //把处理后的数据缓存到本地。
    ut.storage.set("cache_iot_things_type", arr);
  } catch (error) {
    console.log(`error:-->`, error);
  }
  return arr;
};

//获取物模型列表信息。
/* //物模型数据类别-get
/system/dict/data/type/iot_data_type
*/
const queryIotDataType = async () => {
  let cache = ut.storage.get("cache_iot_data_type");
  if (cache) {
    return cache;
  }

  let arr = [];
  try {
    let { code, data } = await http.get(`/system/dict/data/type/iot_data_type`);
    if (+code === 200) {
      arr = data.map(({ dictLabel, dictValue }) => {
        return {
          lable: dictLabel,
          value: dictValue,
        };
      });
      //存储到本地。
      ut.storage.set("cache_iot_data_type", arr);
    }
  } catch (error) {
    console.log(`error:-->`, error);
  }
  return arr;
};

// 获取物模型列表信息-支持分页和搜索。
/* //物模型列表信息-get
/iot/template/list
传参
pageNum=1
pageSize=10
templateName: aaa  按名字搜索
type: 2  物模型类别
*/
const queryTemplateList = (obj) => {
  let { pageNum, pageSize, templateName, type } = obj;
  let params = {
    pageNum, //当前页数。
    pageSize, //一页多少条。
  };
  if (typeof templateName !== "undefined") {
    params.templateName = templateName; //按物模型名字搜索
  }
  if (typeof type !== "undefined") {
    params.type = type; //物模型类别
  }
  return http.get(`/iot/template/list`, {
    params,
  });
};

// 获取指定物模型的详细信息。
/* //获取某一条物模型的详细信息
/iot/template/578
*/
const queryTemplateInfo = (templateId) =>
  http.get(`/iot/template/${templateId}`);

// 新增物模型的信息。
/* //新增物模型信息
/iot/template 「POST」
传参
{"templateId":null,"templateName":"dsadasdsad","userId":null,"userName":null,"tenantId":null,"tenantName":null,"identifier":"aaaaaaaaa","modelOrder":0,"type":"2","datatype":"decimal","isSys":null,"isChart":0,"isHistory":1,"isMonitor":0,"isReadonly":1,"delFlag":null,"createBy":"fastbee","createTime":null,"updateBy":null,"updateTime":null,"remark":null,"specs":"{\"type\":\"decimal\",\"min\":12,\"max\":200,\"unit\":\"千米\",\"step\":10}"}
*/
const _TemplateParams = {
  templateName: "",
  identifier: "",
  modelOrder: 0,
  type: 1,
  datatype: "integer",
  isChart: 0,
  isHistory: 0,
  isMonitor: 0,
  isReadonly: 0,
  specs: "",

  templateId: null,
  userId: null,
  userName: null,
  tenantId: null,
  tenantName: null,
  isSys: null,
  delFlag: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  remark: null,
};
const insertTemplateInfo = (obj) => {
  let params = Object.assign({}, _TemplateParams, obj);
  params.createBy = store.state?.profile?.user?.userName || null; //在调用时，获取登录者信息的名称。
  return http.post("/iot/template", obj);
};

// 修改物模型接口-这里没有测试和遇到过，自己猜的。
const updateTemplateInfo = (obj) => {
  //相比较于新增，obj中需要多传递一个templateId。
  let params = Object.assign({}, _TemplateParams, obj);
  params.createBy = store.state?.profile?.user?.userName || null; //在调用时，获取登录者信息的名称。
  return http.put("/iot/template", obj);
};

// 删除物模型接口-这里没有测试和遇到过，自己猜的。
const deleteTemplateInfo = (ids) => {
  if (!Array.isArray(ids)) {
    ids = [ids];
  }

  return http.delete("/iot/template", {
    data: {
      ids,
    },
  });
};
export default {
  queryIotThingsType,
  queryIotDataType,
  queryTemplateList,

  queryTemplateInfo,
  insertTemplateInfo,
  updateTemplateInfo,
  deleteTemplateInfo,
};

    • fang/f20230708/ManageSystem/src/api/index.js

      import http from "./http";

import iot from "./iot";

// 获取验证码
const queryCaptchaImage = () => http.get("/captchaImage");

// 用户登录校验
const checkUserLogin = (body) => http.post("/login", body);

// 获取登录者信息「含权限信息」
const queryUserProfile = () => http.get("/getInfo");

// 获取地图标注数据
const queryDeviceAll = () => http.get("/iot/device/all");

/* 暴露API */
const API = {
  iot, //this.$API.ito.xxxx来调用。
  queryCaptchaImage,
  checkUserLogin,
  queryUserProfile,
  queryDeviceAll,
};
export default API;

    • fang/f20230708/ManageSystem/src/layout/HeaderLayout.vue

      <script>
import { mapState, mapMutations } from "vuex";
import NavLayout from "./NavLayout.vue";
import ut from "@/assets/utils";

export default {
  components: {
    NavLayout,
  },
  props: {
    collapsed: Boolean,
  },
  computed: {
    // 把vuex中的部分公共状态获取使用
    ...mapState(["profile"]),
    // 获取面包屑导航的数据
    breadcrumbList() {
      let route = this.$route,
        routeList = this.$router.getRoutes();
      let arr = [],
        match = routeList.find((item) => item.path === route.path);
      while (match) {
        let {
          path,
          meta: { title },
        } = match;
        if (title) {
          arr.unshift({
            path,
            title,
          });
        }
        match = match.parent;
      }
      return arr;
    },
  },
  methods: {
    ...mapMutations(["setProfile"]),
    handleCommand(command) {
      if (command === "logout") {
        // 退出登录：清除Token、清除登录者信息、提示、跳转
        ut.storage.remove("TK");
        this.setProfile(null);
        // ...
        this.$message.success("您已安全退出");
        this.$router.replace({
          path: "/user/login",
          query: {
            target: this.$route.fullPath,
          },
        });
        return;
      }
      // 路由跳转
      this.$router.push(command);
    },

    //强制更新：清除部分本地存储信息&强制刷新。
    refresh() {
      console.log(`refresh-->`);
      //缓存的东西在本地存储的localStorage及sessionStorage或cookie里看，然后做循环进行删除。
      ["cache_iot_things_type","cache_iot_data_type"].forEach(key=>{
        localStorage.removeItem(key)
      })

      location.reload(); //刷新页面。
    },
  },
};
</script>

<template>
  <header class="header-layout">
    <div class="content">
      <div class="left">
        <i
          class="el-icon-s-unfold"
          @click="$emit('update:collapsed', false)"
          v-if="collapsed"
        ></i>
        <i
          class="el-icon-s-fold"
          @click="$emit('update:collapsed', true)"
          v-else
        ></i>
        <el-breadcrumb>
          <el-breadcrumb-item
            v-for="item in breadcrumbList"
            :key="item.path"
            :to="item.path"
          >
            {{ item.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="right">
        <el-tooltip content="清空全部缓存及强制刷新">
          <i class="el-icon-refresh" @click="refresh"></i>
        </el-tooltip>
        <el-dropdown @command="handleCommand" v-if="profile">
          <span class="account-avatar">
            <el-avatar :src="mixinPrefixAdd(profile.user.avatar)" />
            <span>{{ profile.user.nickName }}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="/index/personal" icon="el-icon-user">
              个人中心
            </el-dropdown-item>
            <el-dropdown-item command="/index/setting" icon="el-icon-setting">
              个人设置
            </el-dropdown-item>
            <el-dropdown-item command="logout" icon="el-icon-position" divided>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="nav scrollActive">
      <NavLayout />
    </div>
  </header>
</template>

<style lang="less" scoped>
.header-layout {
  padding: 0;
  height: 80px;
  background-color: #fff;

  .content,
  .nav {
    box-sizing: border-box;
    overflow: hidden;
  }

  .content {
    padding: 0 15px;
    height: 50px;
    line-height: 50px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      .el-icon-s-fold,
      .el-icon-s-unfold {
        font-size: 18px;
        margin-right: 20px;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .el-tooltip {
        font-size: 25px;
        margin-right: 15px;
        cursor: pointer;
      }

      .account-avatar {
        display: flex;
        align-items: center;

        .el-avatar {
          margin-right: 5px;
          width: 30px;
          height: 30px;
        }

        :deep(.el-avatar--circle) {
          border-radius: 50% !important;
        }

        span {
          max-width: 132px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }

  .nav {
    margin: 0 15px;
    padding-top: 2px;
    height: 30px;
    overflow-x: auto;
  }
}
</style>
无需参数get请求
  • fang/f20230708/ManageSystem/src/api/iot.js
// 获取物模型类别信息。
/* //物模型类别-get
/system/dict/data/type/iot_things_type
 */
const queryIotThingsType = () =>
  http.get(`/system/dict/data/type/iot_things_type`);
动态参数get请求
  • fang/f20230708/ManageSystem/src/api/iot.js
// 获取物模型列表信息-支持分页和搜索。
/* //物模型列表信息-get
/iot/template/list
传参
pageNum=1
pageSize=10
templateName: aaa  按名字搜索
type: 2  物模型类别
 */
const queryTemplateList = (obj) => {
  let { pageNum, pageSize, templateName, type } = obj;
  let params = {
    pageNum,//当前页数。
    pageSize,//一页多少条。
  };
  if (typeof templateName !== "undefined") {
    params.templateName = templateName;//按物模型名字搜索
  }
  if (typeof type !== "undefined") {
    params.type = type;//物模型类别
  }
  return http.get(`/iot/template/list`, {
    params,
  });
};
有默认值且需要合并的接口
  1. 默认值写在接口外部，后面要用时，合并一下对象。
    • 需要传与不需要传的可以分类排放。
  • fang/f20230708/ManageSystem/src/api/iot.js
import http from "./http";
import store from "@/store";
// 新增物模型的信息。
/* //新增物模型信息
/iot/template 「POST」
传参
{"templateId":null,"templateName":"dsadasdsad","userId":null,"userName":null,"tenantId":null,"tenantName":null,"identifier":"aaaaaaaaa","modelOrder":0,"type":"2","datatype":"decimal","isSys":null,"isChart":0,"isHistory":1,"isMonitor":0,"isReadonly":1,"delFlag":null,"createBy":"fastbee","createTime":null,"updateBy":null,"updateTime":null,"remark":null,"specs":"{\"type\":\"decimal\",\"min\":12,\"max\":200,\"unit\":\"千米\",\"step\":10}"}
 */
const _TemplateParams = {
  templateName: "",
  identifier: "",
  modelOrder: 0,
  type: 1,
  datatype: "integer",
  isChart: 0,
  isHistory: 0,
  isMonitor: 0,
  isReadonly: 0,
  specs: "",

  templateId: null,
  userId: null,
  userName: null,
  tenantId: null,
  tenantName: null,
  isSys: null,
  delFlag: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  remark: null,
};
const insertTemplateInfo = (obj) => {
  let params = Object.assign({}, _TemplateParams, obj);
  params.createBy = store.state?.profile?.user?.userName || null; //在调用时，获取登录者信息的名称。
  return http.post("/iot/template", obj);
};
  • 在调用时，获取登录者信息的名称。
import http from "./http";
import store from "@/store";
const _TemplateParams = {
  createBy: null,
};
const insertTemplateInfo = (obj) => {
  let params = Object.assign({}, _TemplateParams, obj);
  params.createBy = store.state?.profile?.user?.userName || null; //在调用时，获取登录者信息的名称。
  return http.post("/iot/template", obj);
};
放在路径上的信息
// 获取指定物模型的详细信息。
/* //获取某一条物模型的详细信息
/iot/template/578
 */
const queryTemplateInfo = templateId =>http.get(`/iot/template/${templateId}`)

数据缓存

  1. 有些数据不怎么变动，可以存储到本地localhost上，或者是vuex上。
    • 不过需要配合本地强制刷新功能的代码，否则这些数据都不会变，会导致数据万年不变的。
  2. 具体步骤就是
  • 示例代码：

    • fang/f20230708/ManageSystem/src/api/iot.js 仅本地做缓存

      // 获取物模型类别信息。
/* //物模型类别-get
/system/dict/data/type/iot_things_type
*/
const queryIotThingsType = async () => {
  let cache = JSON.parse(localStorage.getItem("cache_iot_things_type"));
  
  if (cache) {
    return cache;
  }

  //没有缓存，向服务器发送请求。
  let arr = [];
  try {
    let { code, data } = await http.get(`/system/dict/data/type/iot_things_type`);
    if (+code === 200) {
      //把服务器返回的数据变为自己需要的。
      arr = data


      //把处理后的数据缓存到本地。
      localStorage.setItem("cache_iot_things_type",JSON.stringify(arr) );
    }

  } catch (error) {
    console.log(`error:-->`, error);
  }
  return arr;
};

      // 获取物模型类别信息。
/* //物模型类别-get
/system/dict/data/type/iot_things_type
*/
const queryIotThingsType = async () => {
  let cache = ut.storage.get("cache_iot_things_type");
  if (cache) {
    return cache;
  }

  //没有缓存，向服务器发送请求。
  let arr = [];
  try {
    let { code, data } = await http.get(
      `/system/dict/data/type/iot_things_type`
    );
    if (+code === 200) {
      //把服务器返回的数据变为自己需要的。
      arr = data.map((item) => {
        return {
          lable: item.dictLabel,
          value: item.dictValue,
          class: item.listClass,
        };
      });
    }

    //把处理后的数据缓存到本地。
    ut.storage.set("cache_iot_things_type", arr);
  } catch (error) {
    console.log(`error:-->`, error);
  }
  return arr;
};

    • fang/f20230708/ManageSystem/src/layout/HeaderLayout.vue 做数据强制更新。

      <script>
export default {
  methods: {

    //强制更新：清除部分本地存储信息&强制刷新。
    refresh() {
      console.log(`refresh-->`);
      //缓存的东西在本地存储的localStorage及sessionStorage或cookie里看，然后做循环进行删除。
      ["cache_iot_things_type","cache_iot_data_type"].forEach(key=>{
        localStorage.removeItem(key)
      })

      location.reload(); //刷新页面。
    },
  },
};
</script>

<template>
        <el-tooltip content="清空全部缓存及强制刷新">
          <i class="el-icon-refresh" @click="refresh"></i>
        </el-tooltip>
</template>

<style lang="less" scoped>
      .el-tooltip {
        font-size: 25px;
        margin-right: 15px;
        cursor: pointer;
      }
</style>
接口直接处理后端数据变成前端想要的
  • fang/f20230708/ManageSystem/src/api/iot.js
// 获取物模型类别信息。
/* //物模型类别-get
/system/dict/data/type/iot_things_type
 */
const queryIotThingsType = async () => {
  let arr = [];
  try {
    let { code, data } = await http.get(
      `/system/dict/data/type/iot_things_type`
    );
    if (+code === 200) {
      //把服务器返回的数据变为自己需要的。
      arr = data.map((item) => {
        return {
          lable: item.dictLabel,
          value: item.dictValue,
          class: item.listClass,
        };
      });
    }
  } catch (error) {
    console.log(`error:-->`, error);
  }
  return arr
};

页面数据强制刷新

  1. 在函数执行时，先清除本地缓存的信息。而浏览器能进行长期存储的，一般也就用localStorage及sessionStorage或cookie，数据库这一类的，一般不常用。
    • 这一步主要就是把在刷新页面时还保留的数据给手动移除。
    • vuex的持久化存储，一般也是依赖的localStorage这类本地存储。
    • 可以对localStorage这类本地存储做一个循环，如果有需要，还可以都清除内部存储的所有东西。
    • 可以允许一些本地存储数据依旧保留，如token等。
  2. 第一步完成之后，使用location.reload()来刷新页面。
    • 这一步就是刷新页面，让vuex中没做持久化的数据初始化。
    • 也可以对一些全局变量做初始化。

  • fang/f20230708/ManageSystem/src/layout/HeaderLayout.vue

    <script>
export default {
  methods: {

    //强制更新：清除部分本地存储信息&强制刷新。
    refresh() {
      console.log(`refresh-->`);
      //缓存的东西在本地存储的localStorage及sessionStorage或cookie里看，然后做循环进行删除。
      ["cache_iot_things_type","cache_iot_data_type"].forEach(key=>{
        localStorage.removeItem(key)
      })

      location.reload(); //刷新页面。
    },
  },
};
</script>

<template>
        <el-tooltip content="清空全部缓存及强制刷新">
          <i class="el-icon-refresh" @click="refresh"></i>
        </el-tooltip>
</template>

<style lang="less" scoped>
      .el-tooltip {
        font-size: 25px;
        margin-right: 15px;
        cursor: pointer;
      }
</style>

通用物模型增删改查

绑定查询框
<script>
export default {
  data() {
    return {
      // 相关类别的全部数据。
      iotThingsList: [],
      iotDataList: [],

      //筛选区域需要的状态。
      filter: {
        templateName: "",
        type: "",
      },

      //分页相关的状态。
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
};
</script>

<template>
  <div class="template-box">
    <!-- 筛选/操作区域 -->
    <div class="filter-box">
      <div class="filter">
        <div class="form-item">
          <label>名称</label>
          <el-input
            placeholder="请输入物模型名称"
            v-model.trim="filter.templateName"
            @keydown.native.enter="initData"
          />
        </div>
        <div class="form-item">
          <label>类别</label>
          <el-select v-model="filter.type" @change="initData">
            <el-option value="" label="全部" />
            <el-option
              v-for="item in iotThingsList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
摁回车加原生事件
<script>
export default {
  data() {
    return {
      //筛选区域需要的状态。
      filter: {
        templateName: "",
        type: "",
      },

      //分页相关的状态。
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    //获取物模型列表数据。
    async initData() {
      //   console.log(`initData-->`);
      let {
        page: { pageNum, pageSize },
        filter: { templateName, type },
      } = this;
      try {
        let { code } = await this.$API.iot.queryTemplateList({
          pageNum,
          pageSize,
          templateName,
          type,
        });
      } catch (error) {
        console.log(`error:-->`, error);
      }
    },
  },
};
</script>

<template>
  <el-input
    placeholder="请输入物模型名称"
    v-model.trim="filter.templateName"
    @keydown.native.enter="initData"
  />
</template>
初始化并行请求
  1. 用Object.freeze()把不需要响应式的数据冻结起来，提高性能。
  • fang/f20230708/ManageSystem/src/api/iot.js
import http from "./http";
import store from "@/store";
import ut from "@/assets/utils";

// 获取物模型类别信息。
/* //物模型类别-get
/system/dict/data/type/iot_things_type
 */
const queryIotThingsType = async () => {
  let cache = ut.storage.get("cache_iot_things_type");
  if (cache) {
    return cache;
  }

  //没有缓存，向服务器发送请求。
  let arr = [];
  try {
    let { code, data } = await http.get(
      `/system/dict/data/type/iot_things_type`
    );
    if (+code === 200) {
      //把服务器返回的数据变为自己需要的。
      arr = data.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue,
          class: item.listClass,
        };
      });
    }

    //把处理后的数据缓存到本地。
    ut.storage.set("cache_iot_things_type", arr);
  } catch (error) {
    console.log(`error:-->`, error);
  }
  return arr;
};

//获取物模型列表信息。
/* //物模型数据类别-get
/system/dict/data/type/iot_data_type
 */
const queryIotDataType = async () => {
  let cache = ut.storage.get("cache_iot_data_type");
  if (cache) {
    return cache;
  }

  let arr = [];
  try {
    let { code, data } = await http.get(`/system/dict/data/type/iot_data_type`);
    if (+code === 200) {
      arr = data.map(({ dictLabel, dictValue }) => {
        return {
          label: dictLabel,
          value: dictValue,
        };
      });
      //存储到本地。
      ut.storage.set("cache_iot_data_type", arr);
    }
  } catch (error) {
    console.log(`error:-->`, error);
  }
  return arr;
};

// 获取物模型列表信息-支持分页和搜索。
/* //物模型列表信息-get
/iot/template/list
传参
pageNum=1
pageSize=10
templateName: aaa  按名字搜索
type: 2  物模型类别
 */
const queryTemplateList = (obj) => {
  let { pageNum, pageSize, templateName, type } = obj;
  let params = {
    pageNum, //当前页数。
    pageSize, //一页多少条。
  };
  if (templateName) {
    params.templateName = templateName; //按物模型名字搜索
  }
  if (type) {
    params.type = type; //物模型类别
  }
  return http.get(`/iot/template/list`, {
    params,
  });
};
export default {
  queryIotThingsType,
  queryIotDataType,
  queryTemplateList,
};
  • fang/f20230708/ManageSystem/src/views/iot/Template.vue
<script>
export default {
  data() {
    return {
      // 相关类别的全部数据。
      iotThingsList: [],
      iotDataList: [],

      //筛选区域需要的状态。
      filter: {
        templateName: "",
        type: "",
      },

      //分页相关的状态。
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    // 获取物模型全部类型。
    async queryIotThingsList() {
      let arr = await this.$API.iot.queryIotThingsType();
      this.iotThingsList = Object.freeze(arr);
      console.log(`arr-->`, arr);
    },
    // 获取全部的数据类别。
    async queryIotDataList() {
      let arr = await this.$API.iot.queryIotDataType();
      this.iotDataList = Object.freeze(arr);
    },
    //获取物模型列表数据。
    async initData() {
      //   console.log(`initData-->`);
      let {
        page: { pageNum, pageSize },
        filter: { templateName, type },
      } = this;
      try {
        let { code } = await this.$API.iot.queryTemplateList({
          pageNum,
          pageSize,
          templateName,
          type,
        });
      } catch (error) {
        console.log(`error:-->`, error);
      }
    },
  },
  async created() {
    //并行获取三种数据：物模型类别、数据类别、物模型列表。
    this.queryIotThingsList();
    this.queryIotDataList();
    this.initData();
  },
};
</script>
循环绑定
<script>
export default {
  data() {
    return {
      // 相关类别的全部数据。
      iotThingsList: [],

      //筛选区域需要的状态。
      filter: {
        templateName: "",
        type: "",
      },
    };
  },
  methods: {
    // 获取物模型全部类型。
    async queryIotThingsList() {
      let arr = await this.$API.iot.queryIotThingsType();
      this.iotThingsList = Object.freeze(arr);
      console.log(`arr-->`, arr);
    },
  },
  async created() {
    //并行获取三种数据：物模型类别、数据类别、物模型列表。
    this.queryIotThingsList();
  },
};
</script>

<template>
  <div class="template-box">
    <!-- 筛选/操作区域 -->
    <div class="filter-box">
      <div class="filter">
        <div class="form-item">
          <label>名称</label>
          <el-input
            placeholder="请输入物模型名称"
            v-model.trim="filter.templateName"
            @keydown.native.enter="initData"
          />
        </div>
        <div class="form-item">
          <label>类别</label>
          <el-select v-model="filter.type" @change="initData">
            <el-option value="" label="全部" />
            <el-option
              v-for="item in iotThingsList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

表格绑定

<script>
export default {
  data() {
    return {
      // 相关类别的全部数据。
      iotThingsList: [],
      iotDataList: [],

      //筛选区域需要的状态。
      filter: {
        templateName: "",
        type: "",
      },

      //分页相关的状态。
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },

      // 表格相关的状态。
      table: {
        data: [],
        loading: false,
      },
    };
  },
  methods: {
    // 获取物模型全部类型。
    async queryIotThingsList() {
      let arr = await this.$API.iot.queryIotThingsType();
      this.iotThingsList = Object.freeze(arr);
      console.log(`arr-->`, arr);
    },
    // 获取全部的数据类别。
    async queryIotDataList() {
      let arr = await this.$API.iot.queryIotDataType();
      this.iotDataList = Object.freeze(arr);
    },
    //获取物模型列表数据。
    async initData() {
      this.table.loading = true;
      //   console.log(`initData-->`);
      let {
        page: { pageNum, pageSize },
        filter: { templateName, type },
      } = this;
      try {
        let { code, rows, total } = await this.$API.iot.queryTemplateList({
          pageNum,
          pageSize,
          templateName,
          type,
        });
        if (+code !== 200) {
          rows = [];
          total = 0;
        }
        this.page.total = total;
        this.table.data = Object.freeze(rows);
      } catch (error) {
        console.log(`error:-->`, error);
      }

      this.table.loading = false;
    },
  },
  async created() {
    //并行获取三种数据：物模型类别、数据类别、物模型列表。
    this.queryIotThingsList();
    this.queryIotDataList();
    this.initData();
  },
};
</script>

<template>
  <div class="template-box">
    <!-- 筛选/操作区域 -->
    <div class="filter-box">
      <div class="filter">
        <div class="form-item">
          <label>名称</label>
          <el-input
            placeholder="请输入物模型名称"
            v-model.trim="filter.templateName"
            @keydown.native.enter="initData"
          />
        </div>
        <div class="form-item">
          <label>类别</label>
          <el-select v-model="filter.type" @change="initData">
            <el-option value="" label="全部" />
            <el-option
              v-for="item in iotThingsList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </div>
      </div>
      <div class="handler">
        <el-button type="primary" ghost icon="el-icon-plus">新增</el-button>
        <el-button type="danger" ghost icon="el-icon-minus">删除</el-button>
        <el-button type="success" ghost icon="el-icon-download">下载</el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-box">
      <el-table stripe :data="table.data" v-loading="table.loading">
      </el-table>
    </div>
  </div>
</template>

element-ui的el-table自适应

  1. 父元素从大到小，表格不会自动缩小。解决方式为给el-table加个绝对定位。
<template>
  <div class="template-box">

    <!-- 表格区域 -->
    <div class="table-box">
      <el-table stripe :data="[]">
        <el-table-column type="selection" align="center" min-width="4%" />
        <el-table-column
          label="名称"
          prop="templateName"
          align="center"
          min-width="8%"
        />
      </el-table>
    </div>

  </div>
</template>

<style lang="less" scoped>
.table-box {
  position: relative;

  .el-table {
    position: absolute;
    width: 100%;
  }

}

</style>
分页选项
格式化表格内容
  1. el-table-column可选的属性

formatter

插槽

  1. 在插槽中处理数据不方便，所以在拿到数据后就提前处理好。
  2. element-ui中处理数据的时候：
    • 一般使用formatter来用做纯数据转换的或用jsx语法来写的组件或标签的格式。
    • 一般使用插槽来处理数据转成组件或标签的格式。

选中项

弹出层

进阶参考

  1. el-table-column可选的属性
方朝端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]PKM－个人知识体系建设
dbbv11995的博客
07-20 1万+
这里集中了本站所有关于个人知识库、个人知识体系方面的文章，下面是展开的目录： PKM理论和方法 艾宾浩斯与他的遗忘曲线 记忆核系统 资料整理的方法 电子资料整理技巧 图书馆馆藏电子资料管理方法分析 浅谈资料...
Atum2：Atum 2：重返沙滩-向Minecraft添加了全新的埃及主题尺寸
02-03
[Atum 2] 在下载 如何通过Maven获得Atum 2 添加到您的build.gradle中： repositories { maven { // url of the maven that hosts Atum 2 files ... } } dependencies { // compile against Atum 2 ...
20230517----重返学习-react组件化开发-小知识-创建一个React组件
seetoyou的博客
05-17 527
组件化开发组件化+工程化React中的组件化开发在Vue2中，其组件的划分有两大思路：TableList方法名属性名思路一：全局组件与局部组件，目前公司项目中划分的主要模式。首先要创建一个 XxxXxx.vue 的单文件组件。VoteDemo这样在任何一个组件中，都可以直接调用这个组件！函数组件与类组件this.xxx在React中，其组件不分全局和局部的，或者说都是局部组件。都得引入才能使用。.vue.jsx.jsx后缀.js后缀.js后缀.jsx后缀.jsx后缀文件.js后缀文件。
20230626----重返学习-Vue的学习路线-常用的vue指令-v-model-vue常见面试题
seetoyou的博客
06-26 327
template>jsx语法OptionsAPI样式私有化方案类组件函数组件UI组件库二次封装vuexvue-router上拉刷新下拉加载超长列表登录权限管理模型。
【前端学习之HTML&CSS】-- 视觉格式化模型之二 浮动 -- 练习
lc1852109的博客
03-20 1169
本节博客继续之前学习的内容，主要负责视觉格式化模型中关于浮动的相关内容,对于猫眼电影的搜索界面实现了样式模仿。
2021 AI年度报告-stateof.ai出品【1】
AnneQiQi的博客
11-02 1175
一、简介 stateof.ai 出品的2021 AI年度报告，其中包含了五点重要的总结： 1：Research：2021年的AI重要科研进展回顾 2：Talent：AI人才的市场供需情况 3：Industry：AI在商业上的不同尝试 4：Politics：AI在政策上、经济上的影响 5：Predictions：接下来一年的AI进展预测 这份188页的PPT报告由知名风投公司Air Street Capital的合伙人Nathan Benaich和投资了100+初创公司的天使投资人Ian Hogarth联合撰
20230624----重返学习-vue-响应式处理思路-仿源码
seetoyou的博客
06-24 304
Vue是渐进式框架Vue2全家桶Vue3全家桶。
20230704----重返学习-SPA单页面应用-vue-router-路由的配置
seetoyou的博客
07-05 118
day-105-one-hundred-and-five-20230704–SPA单页面应用-vue-router-路由的配置 vue-router 常见面试题 面试题：说说你对 SPA 单页面的理解，它的优缺点分别是什么？ 面试题：介绍一下路由的两种实现模式：hash模式 和 history模式 面试题：说一下路由跳转的方案及传参方式有哪些？ 面试题：介绍一下 vue-router 中的导航守卫函数 面试题：介绍一下你对vue-router的理解？ 代码正常但找不到html页面的问题 报错信息：C
springboot+养老院管理系统 毕业设计-附源码31266
weixin_BYSJ1987的博客
11-15 314
本养老院管理系统采用的数据库是Mysql,使用JAVA技术开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
.NET周刊【8月第1期 2023-08-06】
dotNET跨平台
08-12 157
国内文章NativeBuferring，一种零分配的数据类型（上篇）https://www.cnblogs.com/artech/p/17586781.html之前一个项目涉及到针对海量（千万级）实时变化数据的计算，由于对性能要求非常高，我们不得不将参与计算的数据存放到内存中，并通过检测数据存储的变化实时更新内存的数据。存量的数据几乎耗用了上百G的内存，再加上它们在每个时刻都在不断地变化，所以每时...
行业文档-设计装置-撞击试验平台.zip
08-21
航天机构则利用它来验证航天器在重返大气层时的耐受能力。 6. 安全与控制： 撞击试验涉及到极高能量的释放，因此安全措施至关重要。这包括设置安全防护装置、采用远程控制、进行风险评估和应急计划。同时，精准的...
NBA 2021-2022 赛季 阵容（2021.09.22）G--78页.pdf
09-22
【NBA 2021-2022 赛季 阵容解析】 在2021-2022赛季的NBA...湖人则构建了一支年龄结构合理、经验丰富的球队，试图重返巅峰。每个球队的运作都反映出对新赛季的期望和策略，球迷们可以期待这些球队在新赛季的精彩表现。
行业文档-设计装置-基于航天器振动试验声谱的结构故障模式诊断方法.zip
09-06
6. **故障预测**：结合机器学习算法，声谱数据可以被用来建立预测模型，预测未来可能出现的故障，提前进行干预。 总的来说，基于航天器振动试验声谱的结构故障模式诊断方法是航天工程领域中一项关键技术，它对于...
优质资料（2021-2022年收藏）上海证券交易所退市公司重新上市.doc
10-11
首先，办法强调了法律依据，包括《中华人民共和国公司法》、《中华人民共和国证券法》以及《上海证券交易所股票上市规则》等，这些是制定此办法的基础。公司申请重新上市时，必须遵守信息公开和真实性原则，避免虚假...
编程学习之路：从零到一的成长指南
最新发布
KsuferNotes
07-22 430
在当今数字化时代，编程技能已经成为许多人职业发展的重要组成部分。不论你是已经在IT业从业多年的老手，还是刚刚起步的编程新手，这篇博客将带你走过编程学习的每一个重要阶段，从而顺利完成从零到一的华丽转变。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 610
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
手写简易版Spring IOC容器02【学习】
weixin_44794897的博客
07-19 602
其中applyPropertyValues用于从beanDefinition中读取属性的配置信息然后通过BeanUtil(hutool-all中提供的类)为其赋值@Overridetry {// 创建bean实例Class<?if (null!break;// 设置属性值try {// 从beanDefinition中获取property通过Resource获取文件流。
昇思25天学习打卡营第16天|munger85
MungerVC
07-20 458
MobileNet网络是由Google团队于2017年提出的专注于移动端、嵌入式或IoT设备的轻量级CNN网络，相比于传统的卷积神经网络首先安装依赖下载数据。
CVE-2019-16759漏洞原理详解
08-19
### 回答1： 这个问题我可以回答。CVE-2019-16759漏洞是LibreOffice软件中的一个漏洞，攻击者可以利用该漏洞通过特制的ODF文档文件来执行任意代码。该漏洞的原理是由于LibreOffice在处理ODF文档时，没有正确地验证...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值