vxe-table 可编辑渲染 edit-render 自定义组件以及触发事件

wanghanlu_

已于 2023-08-24 17:05:03 修改

阅读量6.9k

点赞数 1

分类专栏： vxe-table 文章标签： vue.js 前端 javascript

于 2023-05-26 16:33:33 首次发布

本文链接：https://blog.csdn.net/wanghanlu_/article/details/130889637

版权

vxe-table 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

本文介绍了如何在VXETable中创建自定义渲染器my_inputModal_edit_Renderer，该渲染器用于在表格编辑时展示一个弹出模态框，包含一个可编辑的文本区域。myinputModal.vue组件包含了输入框和弹出的文本域，允许用户进行多行编辑。通过监听事件和传递参数，实现了数据的双向绑定和更新。

摘要由CSDN通过智能技术生成

实现效果:

实现步骤:

1.创建vxetableRenderer.js文件

//vxetableRenderer.js
//导入
import VXETable from 'vxe-table';
//自定义组件(后面给出组件内代码)
import myinputModal from '@/components/render/myinputModal.vue';
//添加自定义的渲染 名字叫my_inputModal_edit_Renderer
VXETable.renderer.add('my_inputModal_edit_Renderer',{
	autofocus: '.vxe-input--inner',
	renderEdit (h, renderOpts, params){
		let { row, column } = params;
		//events 里是传过来的事件
		let { events } = renderOpts;
		//通过column的参数控制是否使用
		if(column.params.inputModal){
		    //使用on事件名获取事件
			return <myinputModal params={params} onchange={(obj)=>events.change(obj)}></myinputModal>
		}else{
			return <vxe-input onchange={({value, $event})=>events.change({row,column,value})} v-model={row[column.field]} size="small">
			</vxe-input>
		}
	},
})

2.创建myinputModal.vue文件

//myinputModal.vue
<template>
	<div class="edit-down-modal">
		<vxe-input @change="inputChange" ref="cellinput" v-model="row[column.field]" size="small">
		 	<template slot="suffix"><i class="vxe-icon-ellipsis-v" style="cursor: pointer;" @click="showModal"></i></template>
		</vxe-input>
		
		<!-- 这里的弹出框不能添加transfer属性 -->
		<vxe-modal :title="column.title" show-footer @close="closeEvent" @confirm="confirmEvent" v-model="visible"  
		width="1000" height="580" show-zoom resize min-height="100" min-width="100" :margin-size="-300" :escClosable="true">
			<template #default>
				<vxe-textarea 
				 v-model="textareaValue" show-word-count resize="vertical"
				  :autosize="{minRows:20,maxRows:20}">
				</vxe-textarea>
			</template>
		</vxe-modal>
		
	</div>
</template>

<script>
	export default{
		props:{
			//传入的参数
			params:{type:Object,default:()=>{
				return {}
			}},
		},
		data() {
			return{
				textareaValue:"",
				visible:false,
				row:{},
				column:{params:{}},
			}
		},
		watch:{
			visible(nval){
				if(nval){
					this.textareaValue=this.row[this.column.field]||'';
				}
			}
		},
		mounted(){
		    //在这里拿到行和列就好操作了
			if(this.params){
				//行
				this.row=this.params.row;
				//列
				this.column=this.params.column;
			}
		},
		methods:{
			inputChange({value, $event}){
				//触发事件
				this.$emit("change",{row:this.row,column:this.column,value});
			},
			showModal(){
				this.visible=true;
			},
			//点击确定按钮
			confirmEvent(){
			    //改变值
				this.params.row[this.params.column.field]=this.textareaValue;
				this.inputChange({value:this.textareaValue});
			},
			//点击关闭按钮
			closeEvent(){
				this.textareaValue="";
			},
		}
	}
</script>

<style>
</style>

3.使用自定义渲染

3.1在main.js文字中导入vxetableRenderer.js文件。

//我的是创建在根目录的config下,所以@/config/vxetableRenderer.js
import '@/config/vxetableRenderer.js';

3.2在你的列配置中使用

//editRender对象中,name为渲染器名字,events为事件
methods:{
    init(){
        let columns=[
         {width:80,field:"id",title:"id",params:{inputModal:false},editRender:{name:"my_inputModal_edit_Renderer",events:{change:this.inputModalChange}}},
         {width:80,field:"name",title:"姓名",params:{inputModal:true},editRender:{name:"my_inputModal_edit_Renderer",events:{change:this.inputModalChange}}}
        ];
		this.$refs.xGrid.loadColumn(columns);
    },
    inputModalChange(obj){
        console.log("值发生改变",obj);
    }
}