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>

 

Logo

前往低代码交流专区

更多推荐