Vue 表格里的下拉列表

下拉列表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);
                        }
                    }
                });
            }
        }
    ]
};

 

调用list.config.js文件的表格显示文件index.vue：

<template>
    <div class="list-container">
        <Table :columns="column" :data="listData" stripe />
    </div>
</template>

<script>
    import column from './list.config.js';
    export default {
        data() {
            return {
                teamTypeList: [{
                    teamCode: "1",
                    teamName: "aaa"
                },{
                    teamCode: "2",
                    teamName: "bbb"
                },{
                    teamCode: "3",
                    teamName: "ccc"
                },{
                    teamCode: "4",
                    teamName: "ddd"
                }],
                listData: [{
                    teamCode: '12',
                    teamName: 'qqq'
                }]
            }
        },
        methods: {
            //更新该行数据字段
            updateRow(row, key, value) {
                this.listData[row._index][key] = value;
            }
        }
    }
</script>

 

转载于:https://www.cnblogs.com/minozMin/p/9830903.html