最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【未解决】Mac中用vue-admin-template实现智能电力前端页面功能模块

Vue crifan 759浏览 0评论
折腾:
【未解决】用vuejs搭建智能电力管理系统的前端页面
期间,已经搭建起来框架了。
现在就去是修改代码,增加模块和功能了。
然后此处去看代码,希望去改为:
  • table页
    • 列表显示已有数据
  • form页
    • 输入:iec 104的字符串
    • 输出:post创建返回的结果
先去实现form页的输入和输出
经过简单修改
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="IEC 104数据">
        <el-input v-model="form.iec104DataStr" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">新增数据并解析</el-button>
        <el-button @click="onClear">清空</el-button>
      </el-form-item>
      <el-form-item label="返回结果">
        <el-input v-model="form.iec104DataStr" type="textarea" />
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {
        iec104DataStr: ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onClear() {
      this.$message({
        message: 'Cleared!',
        type: 'warning'
      })
    }
  }
}
</script>
。。。
界面大概样子出来了:
但是很明显,界面需要调整。
分别去
调整input的默认高度
element-ui input
Element – The world’s most popular Vue UI framework
Element – The world’s most popular Vue UI framework
Element – 网站快速成型工具
组件 | Element
可自适应文本高度的文本域
试试:autosize
代码:
<el-input v-model="form.iec104DataStr" autosize type="textarea" />
<el-input v-model="form.respJson" autosize type="textarea" />
效果:
粘贴内容后,高度自动增加了:
效果不错。
然后再去看看:
【已解决】vuejs中清除element-ui中input的值
然后接着看看,如何实现发送rest请求
【已解决】vue-admin-template中如何用vuejs去发送REST的api的POST请求并返回和解析json字符串
此处,测试效果:
然后再去table页,想办法把本地mysql中的数据,展示出来:
【已解决】Mac中用vuejs把本地mysql中的数据在vue-admin-template的table列表页面展示出来
然后继续优化
【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图
不过目前决定换思路了:
【未解决】vuejs的vue-admin-template中用底图加叠加图片等元素实现控制面板图

转载请注明:在路上 » 【未解决】Mac中用vue-admin-template实现智能电力前端页面功能模块

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.171 seconds, using 22.13MB memory