vue-render

import  EntAdd from '../entInfo/components/add';

window.selfs = {}
export default {
  name: 'role',
  components: {
    EntAdd
  },
  data () {
    return {
      columns: [
        {
          title: "运营状态",
          align: 'center',
          key: "sbaseOperationState",
          width:120 ,
          render:(h,params)=>{return this.dynamicSelectDom(h,params,'sbaseOperationState',this.options);},
        },
        {
          title:'财务情况（单位：万元）',
          align: 'center',
          width:1200 ,
          children:[
            {
              title:'主营收入',
              width:240 ,
              align: 'center',
              children:[
                {
                  title:'本月发生额',
                  width:240 ,
                  align: 'center',
                  key:'incomeAmountMonth',
                  render:(h,params)=>{ return this.dynamicInputDom(h,params,'incomeAmountMonth');
                  },
                },
                {
                  title:'本年累计',
                  width:240 ,
                  align: 'center',
                }
              ],
            }
            ,
            {
              title:'费用总额',
              width:120 ,
            },
            ]
        },
        {
          title: "财务状况",
          key: "k2",
          align: 'center',
          sortable: true
        },
        {
          title: "t3",
          align: 'center',
          children:[
            {
              title:"s_header1",
              className: 'no_padding',
              render:(h,params)=>{
                let vm = this;
                return h('Input', {
                  props:{
                    value:params.row.s_t1,
                    autosize: true
                  },
                  on: {
                    'on-change': (event) => {
                      console.log(params.row)
                      params.row.s_t1 = event.target.value;
                      vm.data[params.index] = params.row;
                    }
                  }
                })
              },
              align: 'center',
            },
            {title:"s_header2",className: 'no_padding',render:(h,params)=>{
                return h("div", [
                  h("Table", {
                    props: {
                      columns: [{title:"s_t2",key:"s_k2",align: 'center'}],
                      data: params.row.components,
                      "show-header":false,
                    },
                  }),
                ]);
              },align: 'center',}
          ],
        },
        {
          title:"操作",
          align: 'center',
          render:(h,params) =>{
            return h("div",[
              h("Button",{
                props:{
                  type:"info",
                  ghost:true,
                },
                on:{
                  "click":()=>{//点击跳页
                    console.log(params.row.id);
                    this.$router.push({path:'/ProjectListDetail', query: { Oid: params.row.id }})
                  }
                }
              },'详情')
            ])
          }
        }
      ],


      data: [],
      options:[{label:"11",value:"333"},{label:"22",value:"334443"}]

    }
  },

  mounted () {
    let param = {
      operateState:'',
      incomeAmountMonth:'',
      k1:'',
      k2:'',
      s_t1:''
    };
    for (let i=0;i<10;i++){
      param.operateState=''
      param.k1 = 'ss';
      param.k2 = 'ss';
      param.s_t1 = 'ss';
      this.data.push(param)
    }
  },


  methods: {
    hh(){
      console.log(this.data)
    },
    //加载输入框dom params代步行数据 key为行中key
    dynamicInputDom(h,params,key){
      let that = this;
      return h('Input', {
        props:{
          value:params.row[key],
          autosize: true
        },
        on: {
          'on-change': (event) => {
            console.log(params.row)
            params.row[key] = event.target.value;
            that.data[params.index] = params.row;
          }
        }
      })
    },
    //加载输入框dom params代步行数据 key为行中key
    dynamicSelectDom(h,params,key,option){
      let that = this;
      let options = option.map(item => {
        return h("Option", {
          props: {
            value: item.value,
            label: item.label
          }
        });
      });
      return h('Select', {
        props:{
          value:params.row[key],
          autosize: true
        },
        on: {
          'on-change': (event) => {
            params.row[key] = event;//params.row.operateState = event.target.value;
            console.log(params.row)
            that.data[params.index] = params.row;
          }
        },
      },options)
    }

  }
}

 

 

 

<div>

  <button @click="hh">1111</button>


  <Table border :columns="columns" :data="data" :style="{margin:'14px'}"></Table>


</div>