点击按钮获取el-select选择框的值

11 篇文章 0 订阅
<template>
    <div>
        <el-container>
            <el-header>华为云节点任务部署</el-header>
            <el-main>
                <!--上面的下拉框们-->
                <!--组节点下拉框-->
                <el-select id="group" v-model="group_value" placeholder="请选择" >
                    <el-option
                            v-for="item in group_options"
                            :key="item.group_value"
                            :label="item.label"
                            :value="item.label">
                    </el-option>
                </el-select>
                <!--节点下拉框-->
                <el-select v-model="node_value" placeholder="请选择">
                    <el-option
                            v-for="item in node_options"
                            :key="item.node_value"
                            :label="item.label"
                            :value="item.label">
                    </el-option>
                </el-select>
                <!--起节点-->
                <el-select v-model="start_value" placeholder="请选择">
                    <el-option
                            v-for="item in start_options"
                            :key="item.start_value"
                            :label="item.label"
                            :value="item.label">
                    </el-option>
                </el-select>
                <!--止节点-->
                <el-select v-model="stop_value" placeholder="请选择">
                    <el-option
                            v-for="item in stop_options"
                            :key="item.stop_value"
                            :label="item.label"
                            :value="item.label">
                    </el-option>
                </el-select>
                <!--按钮-->
                <el-button  icon="el-icon-d-arrow-right" type="primary" @click="transferValue"></el-button>

                <!--下面的表格-->
                <el-table
                        :data="tableData3"
                        border
                        style="width: 80%">
                    <el-table-column
                            prop="group_value"
                            label="软件名">
                    </el-table-column>
                    <el-table-column
                            prop="node_value"
                            label="节点名">
                    </el-table-column>
                    <el-table-column
                            prop="start_value"
                            label="起始节点">
                    </el-table-column>
                    <el-table-column
                            prop="stop_value"
                            label="截止节点">
                    </el-table-column>
                </el-table>

            </el-main>
        </el-container>
    </div>
</template>

<script>

    export default {
        name: 'index',
        watch: {
            group_value: function(newV, oldV) {
                // this.group_present=oldV;
                this.group_present=newV
            },
            node_value: function(newV, oldV) {
                // this.group_present=oldV;
                this.node_present=newV
            },
            start_value: function(newV, oldV) {
                // this.group_present=oldV;
                this.start_present=newV
            },
            stop_value: function(newV, oldV) {
                // this.group_present=oldV;
                this.stop_present=newV
            },
        },
        data() {
            return {
                //点击按钮后把下拉框的值都获取到
                group_present:'',
                node_present:'',
                start_present:'',
                stop_present:'',
                result2:[],
                result:[],
                tableData: [],
                //用来push的tabledata
                tableData2:[],
                tableData3:[],
                //组节点下拉框值
                group_options: [{
                    group_value: '选项1',
                    label: 'Geoeast'
                }, {
                    group_value: '选项2',
                    label: 'Pardiam'
                }, {
                    group_value: '选项3',
                    label: 'WCC'
                }],
                group_value: '',

                //节点下拉框值
                node_options: [{
                    node_value: '选项1',
                    label: 'hwnode'
                }, {
                    node_value: '选项2',
                    label: 'hwgnode'
                }],
                node_value: '',

                //起节点下拉框值
                start_options: [{
                    start_value: '选项1',
                    label: '1'
                }, {
                    start_value: '选项2',
                    label: '2'
                }, {
                    start_value: '选项3',
                    label: '3'
                }],
                start_value: '',

                //止节点下拉框值
                stop_options: [{
                    stop_value: '选项1',
                    label: '4'
                }, {
                    stop_value: '选项2',
                    label: '5'
                }, {
                    stop_value: '选项3',
                    label: '6'
                }],
                stop_value: ''
            }
        },
        methods:{
            transferValue(){
                this.result.push({'group_value':this.group_present})
                this.result.push({'node_value':this.node_present})
                this.result.push({'start_value':this.start_present})
                this.result.push({'stop_value':this.stop_present})
                console.log(this.group_present)
                console.log(this.node_present)
                console.log(this.start_present)
                console.log(this.stop_present)
                console.log(this.result)
                var res=JSON.stringify(this.result)
                this.result.splice(0,4)
                console.log("删除后的result:")
                console.log(this.result)
                console.log("没格式转换前的res:")
                console.log(res)
                //res2是转换后的
                var res2=this.format(res)
                console.log(res2)
                this.tableData.push(res2)//push只能push字符串
                console.log(this.tableData)
                this.tableData2=JSON.parse(this.tableData)
                this.tableData3=this.tableData3.concat(this.tableData2)
                this.tableData.splice(0,4)
                console.log(this.tableData3)

            },
            format(res){
                var a=res.split(",");
                var a1=a[0].substring(0,a[0].length-1)
                var a2=a[1].substring(1,a[1].length-1)
                var a3=a[2].substring(1,a[2].length-1)
                var a4=a[3].substring(1,a[2].length)
                var res2=a1+","+a2+","+a3+","+a4
                return res2
            }
        }
    }
</script>

<style scoped>
    .el-container{
        height: 600px;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        /*text-align: center;*/
        height:100%;
    }
    .el-select{
        margin-right: 1%;
    }
    .el-table{
        width: 71%!important;
        margin: 0 auto;
        margin-top: 1%;
    }
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值