Vue 表格里的下拉列表

Posted 2021-01-14 minozmin

下拉列表column-select.vue组件内容：

<template>
    <div class="column-select-wrapper">
        <div v-show="!selectShow" class="column-text-container">
            {{modalLabel}}
        </div>
        <Select v-show="selectShow" label-in-value :value="initValue" @on-change="valCHange">
             <Option v-for="(item, index) in options" :key="index" :value="item[valueKey]">{{item[labelKey]}}</Option>
        </Select>
    </div>
</template>

<script type="text/ecmascript-6">
    /**
     * 表行select组件
     */
    export default {
        name: ‘column-select‘,
        data() {
            return {
            }
        },
        props: {
            initValue: {
                type: [String, Number],
                default: ‘‘
            },
            options: {
                type: Array,
                required: true
            },
            //0显示状态  1编辑状态
            status: {
                type: Number,
                default: 1
            },
            valueKey: {
                type: String,
                default: ‘value‘
            },
            labelKey: {
                type: String,
                default: ‘label‘
            }
        },
        computed: {
            selectShow() {
                return this.status === 1;
            },
            modelLabel() {
                let node = this.options.find((item) => {
                    return item[this.valueKey] === this.initValue;
                });
                if(node) {
                    return node[this.labelKey];
                } else {
                    return ‘‘;
                }
            }
        },
        methods: {
            valChange(selectOption) {
                if(selectOption) {
                    this.$emit(‘update‘, selectOption.value);
                }
            }
        }
    }
<script>

<style scoped lang="less">
    .column-select-wrapper {
        .column-text-container {
            height: .36rem;
            line-height: .36rem;
            width: 100%;
        }
        /deep/ .ivu-select {
            position: static;
        }
    }
</script>

调用column-select.vue文件的list.config.js文件内容（表格列表文件）：

import columnSelect from ‘./column-select‘;

export default (ctx) => {
    return {
            title: ‘序号‘,
            align: ‘center‘,
            key: ‘number‘
        },{
            title: ‘列表‘,
            align: ‘center‘,
            render(h, { row }) {
                return h(columnSelect, {
                    props: {
                        initValue: row.teamCode,
                        status: row.status,
                        options: ctx.list,
                        labelKey: ‘teamName‘,
                        valueKey: ‘teamCode‘
                    },
                    on: {
                        update(teamCode) {
                            ctx.updateRow(row, ‘teamCode‘, teamCOde);
                        }
                    }
                });
            }
        },{
            title: ‘操作‘,
            width: 200,
            align: ‘center‘,
            render(h, { row }) {
                 return h(‘div‘, {
                    (row.status === 0) && h(‘TableOperation‘, {
                        props: {
                            type: ‘edit‘,
                            title: ‘编辑‘
                        },
                        on: {
                            click() {
                                ctx.editRow(row);
                            }
                        }
                    }),
                    (row.status === 1) && h(‘TableOperation‘, {
                        props: {
                            type: ‘tick‘,
                            title: ‘编辑‘
                        },
                        on: {
                            click() {
                                ctx.editRow(row);
                            }
                        }
                    }),