new_wms_admin/src/components/FormTable/index.vue

<template>
    <div class="detailsTable">
        <el-table :data="tableData" :border="true" ref="tableRef" :height="height ? height : 340" :row-style="rowStyle">
            <template v-for="item in columns" :key="item.prop">
                <el-table-column
                    :prop="item.prop"
                    :fixed="item.fixed"
                    :align="item.align ? item.align : 'center'"
                    :label="item.label"
                    :width="item.width ? item.width : 'auto'"
                    v-show="item.show"
                    :sortable="item.sortable"
                    :showOverflowTooltip="!item.formType"
                >
                    <template #header v-if="item.isHeaderIcon">
                        <span class="iconfont icon-bianji1 iconfont-mg" style="font-size: 12px">
                            {{ item.label }}
                        </span>
                        <span
                            style="display: inline-block; margin-left: 4px; line-height: 20px; color: #f56c6c"
                            v-if="item.required"
                            >*</span
                        >
                        <el-tooltip effect="dark" :content="item.tooltip" placement="top" v-if="item.tooltip">
                            <el-icon style="cursor: pointer"><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </template>

                    <template #default="scope" v-if="item.formType === 'inputNumber'">
                        <el-input-number
                            :min="1"
                            :max="1000"
                            :controls="false"
                            style="width: 125px"
                            v-model.trim="scope.row[item.prop]"
                            :disabled="tableData[scope.$index].disabled"
                            :placeholder="item.placeholder"
                            :maxlength="item.maxLength"
                            step-strictly
                            @keyup.enter="handleEnterInput(item, scope.$index)"
                        ></el-input-number>
                    </template>
                    <template #default="scope" v-if="item.formType === 'checkbox'">
                        <el-checkbox v-model="scope.row[item.prop]" @change="handleCheckBox(scope.row, scope.$index)" />
                    </template>
                    <template #default="scope" v-if="item.formType === 'input'">
                        <el-input
                            :style="item.width ? item.width : 'width:125px'"
                            v-model.trim="scope.row[item.prop]"
                            :disabled="tableData[scope.$index].disabled"
                            :placeholder="item.placeholder"
                            :maxlength="item.maxLength"
                            @input="verificationInput(item, scope.$index)"
                            @keyup.enter="handleEnterInput(item, scope.$index)"
                            ref="inputRef"
                        ></el-input>
                    </template>
                    <!-- 这个是有远程功能的 -->
                    <template #default="scope" v-if="item.formType === 'selectRemote'">
                        <el-select
                            :placeholder="item.placeholder"
                            filterable
                            remote
                            clearable
                            style="width: 280px"
                            v-model.trim="scope.row[item.prop]"
                            class="m-2 select"
                            :disabled="tableData[scope.$index].disabled"
                            remote-show-suffix
                            :loading="loading"
                            @clear="clear(scope.$index)"
                            :remote-method="(query:any)=>{
                                remoteMethod(query,item.prop,scope.$index)
                        }"
                        >
                            <el-option
                                v-for="option in item.options[scope.$index]"
                                :key="option.materialNumber"
                                :label="option.specifications"
                                :value="option.idConvertBar"
                                @click="handleRemoteClick(item, scope.$index)"
                            />
                        </el-select>
                    </template>

                    <!-- 最后一列的按钮 这是一个具名插槽 -->
                    <template #default="scope" v-if="item.prop === 'operation'">
                        <slot name="operation" v-bind="scope"></slot>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script lang="ts" setup name="FormTable">
// import { cloneDeep } from "lodash-es";
import { ElTable, ElTableColumn } from "element-plus";
import { QuestionFilled } from "@element-plus/icons-vue";
const props = defineProps<{
    columns: any;
    rowStyle?: any;
    isStatus?: boolean;
    tableData?: any;
    height?: number;
    getRemoteData?: (params: any) => void;
    verificationInput?: (params: any) => void;
    handleKeyupEnterInputValue?: (params: any) => void;
    handleClear?: (params: any) => void;
    handleCheckEmit?: (prams: any) => void;
    loading?: any;
}>();

console.log(props, "=========props===========");
const emits = defineEmits<{
    (e: "getRemoteData", params: any): void;
    (e: "verificationInput", params: any): void;
    (e: "handleRemoteClickValue", params: any): void;
    (e: "handleKeyupEnterInputValue", params: any): void;
    (e: "handleClear", params: any): void;
    (e: "handleCheckEmit", params: any): void;
}>();
//表格实例
const tableRef = ref<any>(null);
const inputRef = ref<any>(null);
const selectRemote1Ref = ref<any>(null);

//远程搜索
const remoteMethod = async (val: any, prop: string, index: number) => {
    emits("getRemoteData", {
        val,
        prop,
        index
    });
};
const handleCheckBox = (row: any, index: number) => {
    emits("handleCheckEmit", {
        index
    });
};
//表单输入验证函数
const verificationInput = (item: any, index: number) => {
    const { prop } = item;
    emits("verificationInput", {
        prop,
        index
    });
};
const handleRemoteClick = (item: any, index: number) => {
    emits("handleRemoteClickValue", { item, index });
};
const handleEnterInput = (item: any, index: number) => {
    emits("handleKeyupEnterInputValue", {
        item,
        index
    });
};
const clear = (index: any) => {
    emits("handleClear", {
        index
    });
    console.log(index);
};
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
    element: tableRef,
    inputElement: inputRef,
    selectRemoteElement: selectRemote1Ref
});
</script>

<style lang="scss" scoped>
::v-deep(.table-box .el-table .el-table__header .el-table__cell > .cell) {
    .cell {
        display: flex !important;
    }
}
::v-deep(.el-table__row td) {
    div {
        white-space: wrap;
    }
}
::v-deep(.el-table__body-wrapper .el-table__body) {
    min-height: 51px !important;
    max-height: 90% !important;
    overflow-y: auto !important;
}
</style>