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

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

   <Tableborder:columns="columnsBox":data="pointList"ref="tableA":max-height="170"><templateslot="check"slot-scope="{ row, index }"><Checkbox@on-change="changeStartS(row, index)"v-model="selectArray[index]"></Checkbox></template><templateslot="sw"slot-scope="{ index }"><div class="swlswrap"><!-- 单位更改的 --><Input v-model="pointList[index].yjsw"></Input> <span>m</span></div></template><templateslot="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

iview ui table表格里嵌入其它组件相关推荐

element table表格里的多选按钮，根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
iView中table表格中使用select选框和下拉菜单的方法
首先是iview的表格中使用select选框 {title: '适用区域',//纵列表头(类似于th)width:140, //列表每一格的宽度align: 'center', //ivew里面的写法 ...
element ui table表格轮播
element ui 用table表格示例不用添加任何语法,配上我下方的方法就没可以轻松实现表格轮播效果: 这个方法放在methods()方法里然后在mounted()中调用就可以了,注意我方法里ri ...
iview UI Table 使用总结
表格是展示数据的一种常用的方式,下面简要说一下在一些特定场景下对Iview 中 Table组件的使用场景一场景简述表头中的某一个列的名字需要根据Table组件外部的变量进行关联,外部变量选取不同 ...
html表格中加下拉,怎样在iview的Table表格中添加下拉菜单？
我怎么在table表格里面添加下拉菜单 render: (h, params) => { return h('div', [ h('Button', { props: { type: 'prim ...
设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...
element UI (table表格)
table 左对齐 <el-table:header-cell-style="{'text-align':'left'}":cell-style="{'text-a ...

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

iview ui table表格里嵌入其它组件相关推荐

最新文章

热门文章