实现效果:
实现步骤:
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);
}
}