修改iview库table表格数据为纵向显示

前言

目前的ui框架table都是横向数据显示的，但是客户原型需求是要纵向显示，因为不想自己写样式，所以讲iview框架进行修改封装了一下。 如图：

需要修改成

 

封装 

export function createRender(h, params, this, obj) {
    switch (params.row.type) {
        case "input":
            return h("div", [
                h("Input", {
                    props: {
                        value: params.row.value,
                        slot: 'append',
                    },
                    on: {
                        "on-change": (event) => {
                        },
                        //因为需求要实现可单个字段编辑，所以每个字段都需要监听 valueChange是修改字段方法
                        "on-blur": (event) => {
                            if (params.row.value != event.target.value) {
                                params.row.value = event.target.value;
                                params.row.change = true;
                            } else {
                                params.row.change = false;
                            }

                            if (params.row.change == true) {
                                valueChange(obj, params, this)
                            }
                        },
                        "on-enter": (event) => {
                            if (params.row.value != event.target.value) { //判断修改前后输入内容是否一样
                                params.row.value = event.target.value;
                                params.row.change = true;
                            } else {
                                params.row.change = false;

                            }

                            if (params.row.change == true) {
                                valueChange(obj, params, this)
                            }
                        },
                    },
                }),
            ]);
                    case 'switch':
            return h("div", [
                h("i-switch", {
                    props: {
                        size: "large",
                        value: params.row.value == "1" ? true : false,
                        disabled: params.row.disabled == "true" ? true : false
                    },
                    scopedSlots: {
                        open: () => h("span", "True"),
                        close: () => h("span", "False"),
                    },
                    on: {
                        'on-change': (event) => {
                            params.row.value = event ? 1 : 0;
                            valueChange(obj, params, this)
                        },
                    },
                }),
            ]);
        case "button":
            return h("div", [
                h("i-button", {
                    props: {
                        type: 'success ghost',
                        size: 'small',
                        ghost: true,
                    },
                    on: {
                        "click": (event) => {
                            clickButton(obj, params, this);
                        },
                    },
                }, '操作'),

            ]);

        default:
            return h("div", [
                h("span", params.row.value),
            ]);
    }
}

//数据修改触发
function valueChange(obj, params, this) {
    this.editModel = true; //修改确实弹框，修改字段逻辑在页面处理
    this.updateName = typeof params.row.title != 'undefined' ? params.row.title : params.row.name;
    this.updateKey = params.row.key;
    this.updateValue = params.row.value;
    
}

页面中引用

<template>
  <div class="main">
    <Table border :columns="Column" :data="Data"></Table>
  </div>
</template>

<script>
  import {
    createRender,
} from "../../libs/customTables.js";
export default {
  data() {
    return {
      Column: [
        {
            title: "参数名",
            key: "title",
        },
        {
            title: "参数值",
            key: "value",
            render: (h, params) => {
                //根据type动态生成
                return createRender(h, params, this, this.obj);
            },
        },
      ],
      Data: [
        {
            key: "Enable",
            title: '开关',
            value: "1",
            type: "switch",
        }
        {
            key: "URL",
            title: '地址',
            value: "",
            type: "input",
        },
        {
            key: "...",
            title: '...',
            value: " ",
            type: "input",
        },
      ],
    };
  },
  methods: {
    getData() {
      //...接口请求
      //数据返回处理
      for(let i = 0; i < this.Data.length; i++) {
        this.Data[i].value = res[this.Data[i].key]; 
      }
      
    }
  },
};
</script>

<style>

</style>

总结 

纵向其实和正常表格渲染差不多，只是需要额外处理数据的渲染方式。这只是我自己的实现方式，如果你有更好的方法也可以一起分享探讨哦！