vue render函数的理解
官网上那个例子第一次看是有点懵的 点击打开链接然后看table组件,自己慢慢明白了点,需求是这样的,表格里面的东西,自己定制化的东西多,比如链接可能是需要自己拼接一个URl地址,如下图里面是什么都不一定,那么写组件的时候,不可能把所有情况都考虑到,需要去封装抽离一个专门用来填充的use([], function () {Vue.component('Cell', {pa...
·
官网上那个例子第一次看是有点懵的 点击打开链接
然后看table组件,自己慢慢明白了点,需求是这样的,表格里面的东西,自己定制化的东西多,比如链接可能是需要自己拼接一个URl地址,如下图
里面是什么都不一定,那么写组件的时候,不可能把所有情况都考虑到,需要去封装
抽离一个专门用来填充的
use([], function () { Vue.component('Cell', { pageName: "common", template: "<div></div>", props: { render: Function, column: Object, index: Number }, data: function () { return {} }, render: function (h) { var params = { column: this.column, index: this.index }; return this.render(h, params); }, methods: {} }); });
table中
<Cell :render="col.render" :index="index" :column="item"></Cell>
定义data的时候(看运单号)
columns: [ { type: 'index', width: 80, title: '序号', align: 'center' }, { type: 'checkbox', title: '单号', key: 'No', align: 'center' }, { title: '运单号', key: 'wayNo', sortable: true, render: function (h, params) { return h('div', {}, [ h('a', { class: ['w-table-link'], attrs: { href: 'https://www.baidu.com/?wd=' + params.column.wayNo, target: '_blank' }, on: { click: function (e) { // e.preventDefault(); // e.stopPropagation(); } } }, params.column.wayNo) ]); } }, { title: '客户单号', key: 'cusNo', sortable: true }, { title: '产品', key: 'product' }, { title: '收件人', key: 'recPerson' }, { title: '收件地', key: 'recAddress' }, { title: '发件人', key: 'sender' }, { title: '附加服务', key: 'service' } ],
就是这里了,实际上就是个div,里面有a标签
render: function (h, params) { return h('div', {}, [ h('a', { class: ['w-table-link'], attrs: { href: 'https://www.baidu.com/?wd=' + params.column.wayNo, target: '_blank' }, on: { click: function (e) { // e.preventDefault(); // e.stopPropagation(); } } }, params.column.wayNo) ]); }先理解下,回头再看
更多推荐
已为社区贡献10条内容
所有评论(0)