vxe-grid给单元格加上触发事件

news2024/12/25 14:48:10

效果：输入框的双击事件(其他事件可以由此替换)
在这里插入图片描述
代码

// gridTableOptions是每列的配置项
<vxe-grid v-bind="gridTableOptions" :data="goodsList" ref="xTable">
			// edit_spbh 是对应的样式名，是写在gridTableOptions中的
            <template #edit_spbh="{ row }">
                <vxe-input v-model="row.spbh" type="text" @dblclick.native="dbClickSpbm(row)"
                    @input="inputSpbm(row)"></vxe-input>
            </template>
            <template #pay_type="{ row }">
                <vxe-select v-model="row.pay_type" placeholder="请选择">
                    <vxe-option value="承电" label="承电"></vxe-option>
                    <vxe-option value="兑汇" label="兑汇"></vxe-option>
                </vxe-select>
            </template>
            <template #is_zq="{ row }">
                <vxe-select v-model="row.is_zq" placeholder="请选择">
                    <vxe-option value="是" label="是"></vxe-option>
                    <vxe-option value="否" label="否"></vxe-option>
                </vxe-select>
            </template>
            <template #jh_num="{ row }">
                <vxe-input v-model="row.jh_num" type="text"></vxe-input>
            </template>
            <template #sales_xz="{ row }">
                <vxe-input v-model="row.sales_xz" type="text"></vxe-input>
            </template>
            <template #ysb_mj_num="{ row }">
                <vxe-input v-model="row.ysb_mj_num" type="text"></vxe-input>
            </template>
            <template #ysb_price="{ row }">
                <vxe-input v-model="row.ysb_price" type="text"></vxe-input>
            </template>
            <template #yyc_mj_num="{ row }">
                <vxe-input v-model="row.yyc_mj_num" type="text"></vxe-input>
            </template>
            <template #yyc_price="{ row }">
                <vxe-input v-model="row.yyc_price" type="text"></vxe-input>
            </template>
            <template #pdd_price="{ row }">
                <vxe-input v-model="row.pdd_price" type="text"></vxe-input>
            </template>
            <template #note="{ row }">
                <vxe-input v-model="row.note" type="text"></vxe-input>
            </template>
            <template #contact="{ row }">
                <vxe-input v-model="row.contact" type="text"></vxe-input>
            </template>
        </vxe-grid>


gridTableOptions: {
                    border: true,
                    // 表格高度
                    height: 600,
                    showOverflow: true,
                    columnConfig: {
                        resizable: true
                    },
                    mouseConfig: {
                        area: true, // 是否开启区域选取
                        selected: true
                    },
                    areaConfig: {
                        multiple: true // 是否启用多区域选取功能
                    },
                    editConfig: {
                        mode: 'cell',
                        trigger: 'dblclick' // 双击单元格激活编辑状态
                    },
                    keyboardConfig: {
                        isClip: true,
                        isEsc: true, // 是否开启Esc键关闭编辑功能
                        isArrow: true,
                        isDel: true,
                        isEnter: true,
                        isTab: true,
                        isEdit: true,
                        editMethod: this.editHandler,
                        enterToTab: true,
                    },
                    clipConfig: {
                        isColumnIncrement: true // 如果粘贴的列数超过表格的列数时，自动新增临时列
                    },
                    // 这个是关键，显示每个列表的表头名，以及对应的每列的点击事件
                    columns: [
                        { type: 'seq', width: "5%", title: '序号', align: "center" },
                        { field: 'spbh', title: '商品编号', width: "10%", editRender: {}, 
							// 这个就是上面说的样式名，要对应
sortable: true, slots: { edit: 'edit_spbh' }, align: "center" },
                        { field: 'spmch', title: '品名', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_spmch' }, align: "center" },
                        { field: 'shpgg', title: '规格', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_shpgg' }, align: "center" },
                        { field: 'shengccj', title: '生产厂家', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_shengccj' }, align: "center" },
                        { field: 'jlgg', title: '件装', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_jlgg' }, align: "center" },
                        { field: 'sales_price', title: '售价', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_sales_price' }, align: "center" },
                        { field: 'gys_price', title: '供方报价', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_gys_price' }, align: "center" },
                        { field: 'jr_jg', title: '金仁进价', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_jr_jg' }, align: "center" },
                        { field: 'yx_price', title: '购方需求价', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_yx_price' }, align: "center" },
                        { field: 'sj_price', title: '订单价', width: "10%", editRender: {}, sortable: true, slots: { edit: 'edit_sj_price' }, align: "center" },
                        { field: 'pm_price', title: '票面价格', width: "10%", editRender: {}, sortable: true, slots: { edit: 'pm_price' }, align: "center" },
                        { field: 'shl', title: '数量', width: "10%", editRender: {}, sortable: true, slots: { edit: 'shl' }, align: "center" },
                        { field: 'xq', title: '效期', width: "10%", editRender: {}, sortable: true, slots: { edit: 'xq' }, align: "center" },
                        { field: 'zhengce', title: '政策', width: "10%", editRender: {}, sortable: true, slots: { edit: 'zhengce' }, align: "center" },
                        { field: 'pay_type', title: '付款方式', width: "10%", editRender: {}, sortable: true, slots: { edit: 'pay_type' }, align: "center" },
                        { field: 'is_zq', title: '是否账期', width: "10%", editRender: {}, sortable: true, slots: { edit: 'is_zq' }, align: "center" },
                        { field: 'jh_num', title: '报计划单位数', width: "10%", editRender: {}, sortable: true, slots: { edit: 'jh_num' }, align: "center" },
                        { field: 'sales_xz', title: '销售限制', width: "10%", editRender: {}, sortable: true, slots: { edit: 'sales_xz' }, align: "center" },
                        {
                            title: '药师帮',
                            align: "center",
                            children: [
                                { field: 'ysb_mj_num', title: '卖家数', width: "10%", editRender: {}, sortable: true, slots: { edit: 'ysb_mj_num' }, align: "center" },
                                { field: 'ysb_price', title: '价格', width: "10%", editRender: {}, sortable: true, slots: { edit: 'ysb_price' }, align: "center" }
                            ]
                        },
                        {
                            title: '1药城',
                            align: "center",
                            children: [
                                { field: 'yyc_mj_num', title: '卖家数量', width: "10%", editRender: {}, sortable: true, slots: { edit: 'yyc_mj_num' }, align: "center" },
                                { field: 'yyc_price', title: '价格', width: "10%", editRender: {}, sortable: true, slots: { edit: 'yyc_price' }, align: "center" }
                            ]
                        },
                        { field: 'pdd_price', title: '拼多多', width: "10%", editRender: {}, sortable: true, slots: { edit: 'pdd_price' }, align: "center" },
                        { field: 'note', title: '沟通', width: "10%", editRender: {}, sortable: true, slots: { edit: 'note' }, align: "center" },
                        { field: 'contact', title: '联系方式', width: "10%", editRender: {}, sortable: true, slots: { edit: 'sales_xz' }, align: "center" },
                    ],

                }