IView的table组件在表头设置button如何实现？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了IView的table组件在表头设置button如何实现？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1570字，纯文字阅读大概需要3分钟。

内容图文

需求如上，二话不说，上干货！
UI部分：

// An highlighted block
<template>
    <div>
        <Row :gutter="20" v-if="this.bindStatus === 2 || this.id">
            <Col>
                <FormItem :label='this.id ? "被捆商品:" : "捆绑设置:"' prop="setBind" ref="">
                    <Table :columns="bindList" :data="BodyData" border highlight-row>
                        <template slot-scope="{ row, index }" slot="bindNumber">
                            <input type="text" v-model="bindNumber">
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="text" size="small">删除</Button>
                        </template>
                    </Table>
                </FormItem>
            </Col>
        </Row>
        <Modal
            v-model="modal1"
            title="选择捆绑商品"
            @on-ok="ok"
            @on-cancel="cancel">
            <Input placeholder="输入商品名称进行查询" v-model="this.goodsName" />
            <div>
                <p>商品自编码：{{}}</p>
                <p>商品名称：{{}}</p>
                <div><p>商品图片：</p><img src="http://5b0988e595225.cdn.sohucs.com/images/20180816/e35956a497474708af1175f47e42c839.jpeg" alt="" style="width:200px"></div>
                <p>销售类型：{{}}</p>
                <p>商品属性：{{}}</p>
                <p>销售单价：{{}}</p>
            </div>
        </Modal>
    </div>
</template>

逻辑：

// An highlighted block
bindList: [
                {
                    title: "商品自编码",
                    key: "goodsId",
                    align: "center",
                },
                {
                    title: "商品名称",
                    key: "goodsName",
                    align: "center",
                },
                {
                    title: "捆绑数量",
                    key: "bindNumber",
                    align: "center",
                    slot: "bindNumber"
                },
                {
                    title: "商品图片",
                    key: "goodsImg",
                    align: "center",
                },
                {
                    title: "销售类型",
                    key: "sellType",
                    align: "center",
                },
                {
                    title: "商品属性",
                    key: "goodsAttributes",
                    align: "center",
                },
                {
                    title: "销售单价",
                    key: "perPrice",
                    align: "center",
                },
                {
                    // title: "添加",
                    renderHeader: (h)=>{
                        return h('a',{
                            on: {
                                mousedown: (e) => {
                                    this.modal1 = true
                                }
                            }
                        },'添加')
                    },
                    key: "action",
                    slot: "action",
                    align: "center",
                },
            ],

内容总结

以上是互联网集市为您收集整理的IView的table组件在表头设置button如何实现？全部内容，希望文章能够帮你解决IView的table组件在表头设置button如何实现？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---