iview vue3（vue框架iview中Table动态表头可编辑内容的jsx写法）

本文目录

• vue框架iview中Table动态表头可编辑内容的jsx写法
• Vue+iView实战及跳坑总结
• vue iview 级联选择器组件
• vue iview checkbox点击事件
• vue全家桶有哪些
• vue3.0脚手架为什么一引入iview就报错
• iview组件怎么和vue-router结合

vue框架iview中Table动态表头可编辑内容的jsx写法

有时候会出现以下需求，类似这样

其中不确定有几个分组，可能是A，B两个， 也可能是 A, B, C,D四个，因为是后台配置出来的（且分组下面的展示都一样：如这里的 A1,A2,A3,A4）
在分组数量不确定的时候，如是后台配增或减了分组之后，前端也要相对应的在页面进行修改。而且每新增一个组，对应组下面的A1,A2,A3,A4都得重新写一次，还要保证表格内容是可的。这个时候表格需要动态处理表头信息。如果用官方提供的写法，整个页面会变得超长，且大部分都是重复的，所以这里我使用JSX试了一下，发现效果还不错，下面是实现过程
因为是模拟的，所以一些demo中写死但可以异步加载数据的地方会备注

那么我们要做的第一步就是要先初始化表头信息。从而保证数据的正确性

在表头处理完成后就可以去请求数据了，这里也模拟了一下，最终效果如下

Vue+iView实战及跳坑总结

在官方文档中， Tooltip 显示文本可以自由的设置显示方向，但是偏移量设置官方 API 只给出了一个 offset 属性，默认值为 0 ，类型为 number 。并无具体示例。经过测试， offset 可以接受两个值，具体如下：

在 vue 中可以使用 watch 监听 data 中的属性，如果需要监听对象的属性，可以使用如下方式：

在表单中使用 DatePicker 返回数据时国际标准时间的格式，即: "2019-12-11T16:00:00.000Z" ,但在提交表单的时候需要正常的格式，可以在 on-change 时间中做如下处理：

vue iview 级联选择器组件

 《Col span="24"》

            《FormItem label="所属区域" prop="areaValue"》 

              《Cascader :data="areatree" v-model="formData.areaValue" @on-change="getAreaData"  placeholder="请选择所属区域" change-on-select》《/Cascader》

            《/FormItem》

        《/Col》

《script》

import { interFaceImpl } from "@/api/index"; // 封装的方法，用于调用指定接口

import { api } from ’@/views/sluiceConfig/lockRoomInfo/index’; //请求接口

export default {

  data() {

    return {

      defaultTree: , //默认区域数据

      areatree: ,//所属区域树形列表

      formData: { // 表单字段对象

        areaCode: "", // 所属闸室

        areaValue: ,

      },

  watch: {

    // 监听详细信息赋值

    detailData(newVal) {

      if (JSON.stringify(newVal) !== "{}") {

        this.formData = newVal

        this.formData.areaValue = ;

        if (this.formData.areaCode) {

          this.getAreaValue(this.formData.areaCode);

        }

      } else {

        this.formData = {

          areaCode: "", // areaCode

        };

        this.formData.areaValue = ;

        this.$refs.resetFields();

      }

    }

  },

  created() {

        this.getAreaTreeData();

  },

  methods: {

   getAreaTreeData() { // 获取区域树信息

      var that = this;

      return new Promise((resolve,reject) =》 {

        this.$interFaceImpl(api).then(res =》 {

          // debugger

          if (res && res.data) {

            res.data.data.forEach(ele =》 {

              if (ele.areaCode != ’-1’) {

                that.defaultTree.push({

                  value: ele.areaCode,

                  label: ele.areaName,

                  parentValue: ele.parAreaCode

                })

              }

            })

            that.areatree = transform(that.defaultTree, ’value’, ’parentValue’, ’children’);

          }

          resolve()

        }).catch(err =》 {

          reject(err)

        })

      });

    },

    //级联选择赋值

    getAreaData: function(val){

      val.forEach(ele =》 {

        this.formData.areaValue.unshift(ele)

      })

      this.formData.areaCode = val

    },

 //初始化默认值

    getAreaValue: function(id){

      var that = this;

      that.defaultTree.forEach(ele =》 {

        if(ele.value == id){

          that.formData.areaValue.unshift(ele.value);

          that.formData.areaCode = that.formData.areaValue

          that.getAreaValue(ele.parentValue);

        }

      })

    },

  }

};

《/script》

vue iview checkbox点击事件

诉求：在做后台系统用户组权限这块，后台要求点击多选框时把当前ID传过去

但ivew Checkbox组件文档写的不全，于是研究了一番

CheckboxGroup v-model绑定所有勾选项，格式为数组、on-change事件可以获取当前所有勾选项，格式为数组
Checkbox用@click.native绑定点击事件(直接用@click无反应)，然后在事件里进行相应的操作，把id传给后台

但是写的过程中发现了iview的bug,就是CheckboxGroup v-model绑定的数组渲染时后出现错误，会勾选错误，于是只能放弃iview用原始的checkbox

用原生checkbox就灵活多了，加@click,@change都可以，而且可以把数组直接传入方法里，也不需要$event获取
然后渲染勾选项直接v-model绑定就好，不用再处理为数组

写到这里请让我说一声iview垃圾！！！
对了说一句项目里用的iview2.x by the way

vue全家桶有哪些

vue全家桶有：1.Vue-cli，基于Vue.js进行快速开发的完整系统；2.vue-router，vue官方的路由管理器；3.vuex，为vue应用程序开发的状态管理模式；4.axios，基于Promise用于浏览器和node.js的HTTP客户端vue全家桶有以下几种：
1.vuecli
2.vueRouter
3.vuex：
4.Axios：
5.搭配UI框架如：iview、vant、elementUI：

vue3.0脚手架为什么一引入iview就报错

• 还没有支持vue3.0

• ue的ui框架iview一定要配合webpack用吗?webpack iview vue.js新...新手真心吐槽一下,iview的脚手架工具用npm run init各种报错,官方也不指导一下...天津众 维原画设计提供

iview组件怎么和vue-router结合

《template》
《Page :current="1" :total="100"》《/Page》
《/template》
《script》
import { Page } from ’iview’;
export default {
components: { Page }
}
《/script》