I have customized a component. How can I implement Render custom cell editors in the Vue Grid
I have customized a component. How can I implement Render custom cell editors in the Vue Grid?
edit=batch
write: () => {
stateObject = new DropDownList({
dataSource: state,
fields: { value: "stateId", text: "stateName" },
enabled: false,
placeholder: "Select a state",
floatLabelType: "Never",
});
stateObject.appendTo(stateElement);
},
Where should I make the changes?
Dropdown Grid Component:
<template>
<div style="display: flex">
<t-select-table
ref="selectTableRef"
:table="table"
:columns="table.columns"
:isShowPagination="props.isShowPagination"
v-bind="$attrs"
:SearchArr="SearchArr"
:scroll="{ x: 1000, y: 400 }"
:keywords="{ label: 'UserName', value: 'BaseID' }"
@checked-change="checkedChange"
:placeholder="props.placeholder"
:disabled="props.disabled"
:defaultSelectVal="defaultSelectVal"
isKeyup></t-select-table>
<a-button v-if="props.showSelectButton" @click="openSelect" :disabled="props.disabled">选择</a-button>
</div>
<SelectModal @register="registerSelectModal" @select="onSelectModal" />
</template>
<script lang="ts" setup>
import { computed, unref, ref, toRefs, defineProps, defineEmits, onMounted, nextTick, watch } from 'vue';
import { getColumnsAPI, getSearchBaseListAPI } from '/@/api/extend/SearchBase/SearchBase';
//import DialogForm from './selectDialog.vue';
import { useAttrs } from '/@/hooks/core/useAttrs';
const emit = defineEmits(['update:modelValue']);
//弹窗
import { useModal } from '/@/components/Modal';
import SelectModal from './SelectModal.vue';
const [registerSelectModal, { openModal: openSelectModal }] = useModal();
// 组合属性和监听器
const attrs = useAttrs({ excludeDefaultKeys: false });
const getBindValue = computed(() => ({ ...unref(attrs) }));
const changedByChild = ref(false); // 添加这一行来跟踪modelValue是否由子组件更改
// const selectTableRef: any = ref<HTMLElement | null>(null);
const selectTableRef = ref(null);
// Props
const props = defineProps({
Value: { type: String }, // 添加了modelValue属性
modelValue: { type: String }, // 添加了modelValue属性
placeholder: { type: String }, // placeholder
disabled: { type: Boolean, default: false }, // 是否禁用
isShowPagination: { type: Boolean, default: true }, // 是否分页
BaseType: { type: Number, default: 999999 },
SearchBill: { type: String, default: '999999' }, //用于单据查询使用,如果='SearchBill' 就是
billType: { type: String, default: '999999' }, //用于单据类别查询用的
systemType: { type: String, default: 'JR' }, // OA是OA JR是标准系统
showSelectButton: { type: Boolean, default: true }, //是否显示选择按钮
});
watch(
() => props.modelValue,
val => {
// console.log('modelValue111111111');
// console.log(val);
// 如果changedByChild为false（即由父组件更改），则执行setValue(val)
if (!changedByChild.value) {
setValue(val);
}
changedByChild.value = false; // 无论如何都重置此标记，以准备下一次更改
},
{ immediate: true },
);
// 监控 value 的变化
watch(
() => props.value,
(val) => {
if (!changedByChild.value) {
setValue(val);
}
changedByChild.value = false;
},
{ immediate: true }
);
const defaultSelectVal = computed(() => {
if (Array.isArray(props.modelValue)) {
// 如果已经是数组，直接返回
return props.modelValue;
} else if (props.modelValue) {
// 如果是非空字符串或其他非空值，转换为数组
return [props.modelValue];
} else {
// 如果是空或未定义，返回空数组
return [];
}
});
const SearchArr = ref([]); //查询数组就是要 搜的 字段
const table = ref({
data: [
// ... 数据
],
columns: [
// ... 列数据
],
});
// const checkedChange = (keys: any, row: any) => {
// console.log("传给后台的值", keys, row);
// console.log("传给v-model", state.selectVal);
// };
const checkedChange = (row: any, keys: any) => {
// console.log('单选--传给后台的值123', row[0]);
// console.log('单选--传给后台的值123', row[0].BaseID);
console.log('props.disabled');
console.log(props.disabled);
console.log(props.systemType);
if (row[0] && row[0].BaseID) {
emit('update:modelValue', row[0].BaseID);
emit('update:value', row[0].BaseID); // 新增 emit，用于更新 value
} else {
emit('update:modelValue', '');
emit('update:value', ''); // 新增 emit，用于更新 value
}
changedByChild.value = true; // 如果子组件更改了modelValue，则将此值设置为true
// console.log('单选--传给后台的值123', row[0]);
console.log('单选--传给后台的值123');
};
//临时
// Refs
const formVisible = ref(false);
const dataSearchBase = ref([]);
const SearchBaseColumn = ref([]);
const refreshData = async () => {
const dataParams = {
BaseTypes: props.BaseType,
billType: props.billType,
systemType: props.systemType,
// ...其他默认参数
};
// 获取DATA
const resData = await getSearchBaseListAPI(dataParams);
table.value.data = resData.data;
let getColumnsParams = {
baseTypes: dataParams.BaseTypes,
systemType: dataParams.systemType,
};
// 获取Column
const resColumns = await getColumnsAPI(getColumnsParams);
SearchBaseColumn.value = resColumns.data;
resColumns.data.forEach(row => {
SearchArr.value.push(row.F_EN_CODE);
});
// 根据您给的规则进行数据转换
const transformedColumns = resColumns.data.map(item => ({
title: item.F_FULL_NAME,
width: item.F_width, // 转为字符串并添加'px'
// maxWidth: item.F_width+10,
dataIndex: item.F_EN_CODE,
resizable: true,
}));
// 赋值给table.columns
table.value.columns = transformedColumns;
};
defineExpose({ refreshData });
// 使用生命周期钩子
onMounted(async () => {
await refreshData();
// if (props.SearchBill === 'SearchBill') {
// await refreshData();
// }
});
function setValue(value) {
if (value !== null && value !== undefined && value !== 0 && value !== '') {
console.log('setValue', value);
if (value) {
if (selectTableRef.value) {
selectTableRef.value.ModifyDefaultSelectvalue(defaultSelectVal.value);
}
}
} else {
if (selectTableRef.value) {
selectTableRef.value.ModifyDefaultSelectvalue('');
}
}
}
function openSelect() {
console.log('openSelectModal');
//console.log(data);
let data = {
arrColumns: SearchBaseColumn.value,
dataAll: table.value.data,
SearchArr: SearchArr.value,
titleLabel: props.placeholder,
defaultSelectVal: defaultSelectVal.value,
};
console.log('openSelectModal');
console.log(data);
openSelectModal(true, data);
}
function onSelectModal(returnBaseID) {
console.log('onSelectModal');
console.log(returnBaseID);
if (returnBaseID.length > 0) {
// 只传递数组的第一个元素
emit('update:modelValue', returnBaseID[0]);
emit('update:value', returnBaseID[0]); // 新增 emit，用于更新 value
} else {
// 如果数组为空，传递空字符串
emit('update:modelValue', '');
emit('update:value', ''); // 新增 emit，用于更新 value
}
}
</script>
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='dataGrid' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100 :validationRules='orderIDRules'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120 :validationRules='customerIDRules'></e-column>
<e-column field='ShipCountry' headerText='ShipCountry' editType='dropdownedit' :edit='countryParams' width=150 :validationRules='shipCountryRules'></e-column>
<e-column field='ShipCity' headerText='Ship City' editType='dropdownedit' :edit='stateParams' width=150 :validationRules='shipCityRules'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide} from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns,Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { Query } from '@syncfusion/ej2-data';
const dataGrid = data;
let country = [
{ countryName: "United States", countryId: "1" },
{ countryName: "Australia", countryId: "2" },
];
let state = [
{ stateName: "New York", countryId: "1", stateId: "101" },
{ stateName: "Virginia ", countryId: "1", stateId: "102" },
{ stateName: "Washington", countryId: "1", stateId: "103" },
{ stateName: "Queensland", countryId: "2", stateId: "104" },
{ stateName: "Tasmania ", countryId: "2", stateId: "105" },
{ stateName: "Victoria", countryId: "2", stateId: "106" },
];
let countryElement, stateElement, countryObject, stateObject;
const editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: "Normal",
};
const toolbar = ["Add", "Edit", "Delete", "Update", "Cancel"];
const orderIDRules = { required: true, number: true };
const customerIDRules = { required: true };
const shipCountryRules = { required: true };
const shipCityRules = { required: true };
const countryParams = {
create: () => {
countryElement = document.createElement("input");
return countryElement;
},
read: () => {
return countryObject.text;
},
destroy: () => {
countryObject.destroy();
},
write: () => {
countryObject = new DropDownList({
dataSource: country,
fields: { value: "countryId", text: "countryName" },
change: () => {
stateObject.enabled = true;
let tempQuery = new Query().where(
"countryId",
"equal",
countryObject.value
);
stateObject.query = tempQuery;
stateObject.text = null;
stateObject.dataBind();
},
placeholder: "Select a country",
floatLabelType: "Never",
});
countryObject.appendTo(countryElement);
},
};
const stateParams = {
create: () => {
stateElement = document.createElement("input");
return stateElement;
},
read: () => {
return stateObject.text;
},
destroy: () => {
stateObject.destroy();
},
write: () => {
stateObject = new DropDownList({
dataSource: state,
fields: { value: "stateId", text: "stateName" },
enabled: false,
placeholder: "Select a state",
floatLabelType: "Never",
});
stateObject.appendTo(stateElement);
},
};
provide("grid", [Edit, Toolbar]);
</script>
Hi Zhong,
Greetings from Syncfusion support.
A ticket regarding this query has already been generated under your Syncfusion account. Please refer to that ticket for any further updates.
Regards
Aishwarya R
