vue中使用iview表格组件如何为其某一项添加click事件, 为"操作","详情"或者具体某一列添加链接操作
1.为"操作"列的每一项添加点击事件 通过给 columns 数据的项,设置一个函数 render,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数。render 函数传入两个参数,第一个是 h,第二个是对象,包含 row、column 和 index,分别指当前单元格数据,当前列数据,当前是第几行。(查看官网案例:https://w
1.为"操作"列的每一项添加点击事件
通过给 columns 数据的项,设置一个函数 render,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数。render 函数传入两个参数,第一个是 h,第二个是对象,包含 row、column 和 index,分别指当前单元格数据,当前列数据,当前是第几行。(查看官网案例:https://www.iviewui.com/components/table)
2.为"详情"列添加扩展参数项
<script>
import expandRow from './expandRow.vue'
export default {
components: {
expandRow
},
data () {
return {
columns: [
{
type: 'expand',
title: '详情',
align: 'center',
width: 60,
render: (h, params) => {
return h(expandRow, {
props: {
row: params.row
}
})
}
},
{
title: 'ID',
key: 'id',
align: 'center'
},
{
title: '项目名称',
key: 'projectname',
align: 'center'
}
]
}
}
}
</script>
3.table表格中某一列数据设置点击事件 (点击"访问次数"弹出"访问详情列表" 或者为某一列数据添加链接)
render: (h, params) => {
let url = 'http://www.cainiao/projectView.php?pid=' + params.row.greenid
return h('a', {
attrs: {
href: url,
target: '_black'
}
}, params.row.greenid)
}
<script>
export default {
data () {
return {
columns: [
{
title: '项目名称',
key: 'projectname',
align: 'center'
},
{
title: '绿皮ID',
key: 'greenid',
align: 'center',
render: (h, params) => {
let url = 'http://www.cainiao/projectView.php?pid=' + params.row.greenid
return h('a', {
attrs: {
href: url,
target: '_black'
}
}, params.row.greenid)
}
},
{
title: '访问次数',
key: 'pv',
align: 'center',
render: (h, params) => {
return h('div', [
h('a', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.row)
}
}
}, params.row.pv)
])
}
}
],
}
}
}
</script>
更多推荐
所有评论(0)