iview 表格可输入 和操作表头实现方式

 

  

 一些复杂表格根本实现起来很头痛。我提交一些代码希望对你有帮助

 iview表格操作

render ： 操作表格行

renderHeader：操作表格头

children：分裂表格头

<template>

      <div class="box">
    <h1 >测试</h1>

    <Table :columns="columns1" :data="data1" border></Table>



  </div>
</template>

<script>
export default {
  
  data() {
    return {
      columns1: [
          {
             title:"序号",
             type:'index', 
             width:61,
             align: "center",
          },
        {
          align: "center",
          key:'name',
          width:160,
          renderHeader: (h, params) => {
            return h(
              "div",
              {
                style: {
                  width: "170px",
                  height: "150px",
                  display: "flex",
                  "flex-direction": "column",
                  position: "absolute",
                  top: 0,
                  left: '63px',
                  //   "border-right": "1px solid #e8eaec",
                },
              },
              [
                h(
                  "strong",
                  {
                    style: {
                      //   "margin-bottom": "10px",
                      //   "margin-left": "40px",
                      left: "98px",
                      top: "8px",
                      position: "absolute",