spfm-market-front/src/pages/main/performance/components/table.vue

<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-11-01 18:02:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 19:55:28
 * @FilePath     : \spfm-market-front\src\pages\main\performance\components\table.vue
-->
<template>
    <el-table class="simple-table" :data="computed_list" v-loading="loading">
        <el-table-column
            v-for="(
                { props, label, type, width, align, children, dictionary },
                index
            ) in config"
            :key="index"
            :prop="props"
            :width="width"
            :label="label"
            :align="align || 'center'"
        >
            <template #default="scope">
                <div v-if="type === 'edit'">
                    <el-input
                        v-if="scope.row[`edit`]"
                        v-model="scope.row[props]"
                        autosize
                        type="textarea"
                        @change="handleModify"
                    />
                </div>
                <div v-else-if="type === 'textarea'">
                    <pre class="simple-table-break">{{ scope.row[props] }}</pre>
                </div>
                <div v-else-if="type === 'date'">
                    <div>{{ $formatDate(scope.row[props], "YYYY-MM-DD") }}</div>
                </div>
                <div v-else-if="type === 'click'">
                    <div
                        class="simple-table-click cursor-pointer"
                        @click="handleClick(props, scope.row)"
                    >
                        {{ scope.row[props] }}
                    </div>
                </div>
                <div v-else-if="type === 'dictionary'">
                    {{ dictionary[scope.row[props]] }}
                </div>
                <div v-else>{{ scope.row[props] }}</div>
            </template>
            <template v-if="children">
                <el-table-column
                    v-for="(
                        { props, label, width, align, type }, index
                    ) in children"
                    :key="index"
                    :prop="props"
                    :width="width"
                    :label="label"
                    :align="align || 'center'"
                >
                    <template #default="scope">
                        <div v-if="type === 'edit'">
                            <el-input
                                v-model="scope.row[props]"
                                @change="handleModify"
                                autosize
                                type="textarea"
                            />
                        </div>
                        <div v-else>{{ scope.row[props] }}</div>
                    </template>
                </el-table-column>
            </template>
        </el-table-column>
        <el-table-column
            v-if="handleRow.length"
            label="操作"
            :width="handleRow.length * 50"
        >
            <template slot-scope="scope">
                <span
                    v-for="(
                        { label, props, popconfirm, visible }, index
                    ) in handleRow"
                    :key="index"
                    class="padding-right-5"
                >
                    <span v-if="handleFormat(visible, scope.row)">
                        <el-popconfirm
                            v-if="popconfirm"
                            :title="`确定要${label}吗？`"
                            @confirm="handleClick(props,scope.row)"
                            @cancel="handleCancel"
                        >
                            <el-button
                                slot="reference"
                                type="text"
                                size="small"
                                >{{ label }}</el-button
                            >
                        </el-popconfirm>
                        <el-button
                            v-else
                            @click="handleClick(props, scope.row)"
                            type="text"
                            size="small"
                            >{{ label }}</el-button
                        >
                    </span>
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => [],
        },
        config: {
            type: Array,
            default: () => [],
        },
        loading: {
            type: Boolean,
            default: false,
        },
        handleRow: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        computed_list() {
            return this.list.map((element) => ({
                ...element,
            }));
        },
    },
    methods: {
        handleFormat(params, data) {
            let visible = true;
            if (params) {
                visible = false;
                Object.keys(params).forEach((element) => {
                    if (params[element].includes(data[element])) {
                        visible = true;
                    }
                });
            }
            return visible;
        },
        handleClick(props, row) {
            console.log('aaaaaaaaa')
            this.$emit(props, row);
        },
        handleCancel(){
            console.log('我被关闭了')
        },
        handleModify() {
            this.$emit("modify", this.computed_list);
        },
    },
};
</script>