easyui+vue 数据表更新问题的解决

<template>
  <div>
    <h2>Checkbox Selection</h2>
    <LinkButton iconCls="icon-add" @click="reload">Add</LinkButton>
    <LinkButton iconCls="icon-edit" @click="check">Check</LinkButton>
    <DataGrid :data="mut_items"
              style="width: 100%;height: 100%;"
              :dblclickToEdit="true"
              selectionMode="row"
              :pagination="true"
              :total="mut_items.length"
              :pageSize="10"
              editMode="row"
              @editEnd="onEditEnd($event)"
              @cellClick="onCellClick($event)"
              :clickToEdit="false">
      <GridColumn field="ck" :width="50" align="center">
        <template v-slot:header>
          <CheckBox v-model="allChecked" @checkedChange="onAllCheckedChange($event)"></CheckBox>
        </template>
        <template v-slot:body="scope">
          <CheckBox  v-model="scope.row.selected" @checkedChange="onCheckedChange($event)"></CheckBox>
        </template>
      </GridColumn>
      <GridColumn field="ID" title="参量标识" width="10%"></GridColumn>
      <GridColumn field="name" title="参量名称" width="25%"></GridColumn>
      <GridColumn field="mode" title="参量属性" align="center"></GridColumn>
      <GridColumn field="V0" title="参量数值" align="center"></GridColumn>
      <GridColumn field="V1" title="参量修改" align="center" :editable="true"></GridColumn>
      <GridColumn field="date" title="修改日期" align="center"></GridColumn>
    </DataGrid>
  </div>
</template>

<script setup lang="js">
import {DataGrid, GridColumn, CheckBox, Panel, Pagination, LinkButton} from "v3-easyui";
</script>

<script lang="js">
import {ref} from "vue";
import axios from "axios";
export default {
  data() {
    return {
      mut_items: [],
      allChecked: false,
      rowClicked: false
    };
  },
  computed: {
    checkedRows() {
      return this.mut_items.filter(row => row.selected);
    }
  },
  methods: {
    check(){
      axios.get("/data.json").then((rep)=>{
        for(let i in rep.data){
          Object.assign(rep.data[i],{update:0});
          console.log(rep.data[i]);
          this.mut_items.push(rep.data[i]);
        }
      }).catch((err)=>{
        console.log(err);
      });
      this.$nextTick(()=>{this.mut_items.map(row=>{row.update++;})});
    },
    reload(){
      axios.get("/data.json").then((rep)=>{
        this.mut_items = [];
        for(let i in rep.data){
          Object.assign(rep.data[i],{update:0});
          console.log(rep.data[i]);
          this.mut_items.push(rep.data[i]);
        }
      }).catch((err)=>{
        console.log(err);
      });
      this.$nextTick(()=>{this.mut_items.map(row=>{row.update++;})});
    },
    onAllCheckedChange(checked) {
      if (this.rowClicked) {
        return;
      }
      this.mut_items = this.mut_items.map(row => {
        return Object.assign({}, row, {
          selected: checked
        });
      });
    },
    onEditEnd(event){
      console.log(event);
    },
    onCellClick(event){
      console.log(event);
    },
    onCheckedChange(checked) {
      this.allChecked = this.checkedRows.length === this.mut_items.length;
      this.rowClicked = true;
      this.$nextTick(() => (this.rowClicked = false));
    }
  },
};
</script>

nextTick 保证DOM 渲染完成

数据的增删改查可以实时刷新出来,不建议在封装组件

easyui 对项目开发来讲,后端友好,尤其是网管类软件的开发,不需要复杂的前端页面

成品效果

比以前小了500K

再加一个参数筛选,以后更方便用

完成

前后端Rest 接口测试正常,再加一个升级接口完成;筛选也可以正常显示 和 OMT 公用一套参数解析,OMT 客户端为主要维护终端;网页为辅助功能

网页升级功能http 升级

原文地址：https://blog.csdn.net/weixin_45647912/article/details/143504561

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！