iview ui table表格里嵌入其它组件

iview ui table表格里嵌入其他组件的方式

   <Table
        border
        :columns="columnsBox"
        :data="pointList"
        ref="tableA"
        :max-height="170"
      >
        <template
          slot="check"
          slot-scope="{ row, index }"
        >
          <Checkbox
            @on-change="changeStartS(row, index)"
            v-model="selectArray[index]"
          ></Checkbox>
        </template>
        <template
          slot="sw"
          slot-scope="{ index }"
        >
          <div class="swlswrap">
              <!-- 单位更改的 -->
            <Input v-model="pointList[index].yjsw"></Input> <span>m</span>
          </div>
        </template>
        <template
          slot="ls"
          slot-scope="{ index }"
        >
          <div class="swlswrap">
            <Input v-model="pointList[index].ls"></Input> <span>m³/s</span>
          </div>
        </template>
      </Table>
    <script>
     columnsBox: [
        {
          title: "起点",
          slot: "check",
          align: "center",
          width: 50,
        },
        { title: "站名", key: "dqwz", align: "center", width: 80 },
        { title: "水系", key: "sx", align: "center" },
        { title: "水位", slot: "sw", align: "center" },
        { title: "流量", slot: "ls", align: "center" },
      ],
    </script>

这个是用插槽的方式添加组件

{
	title: '午餐选择',
	key: 'lunch',
	width: 200,
	align: 'center',
	render: (h, params) => {
	    return h('Select', {
			    props:{
					value : this.data[params.index].lunch,  //数据的双向绑定 data是定义好的数据
					transfer: true,
			    },
			    on: {
					'on-change':(event) => { //select改变事件
					    this.data[params.index].lunch = event;
					}
			    },
			},
			this.lunch_array.map(function(val,key){ //lunch_array是午餐的集合数组
			    return h('Option', {
					props:{
					    value:val.value
					}
			    }, val.text);
			})
	    )
	}
},

这个是使用render函数来创建select