oa-system/src/components/ConferenceModule/Supplierinfo.vue

<template>
    <div class="supplierinfo-all">
        <div class="supplierinfo-screen">
            <div class="supplierinfo-screen-ul">
                <div class="supplierinfo-screen-li">
                    <div class="supplierinfoscreen-li-title">供应商类型:&nbsp;</div>
                    <el-select size="small" v-model="value" filterable placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                </div>
                <div class="supplierinfo-screen-li">
                    <div class="supplierinfoscreen-li-title">供应商名称:&nbsp;</div>
                    <el-input size="small" v-model="value" placeholder="请输入内容"></el-input>
                </div>
                <div class="supplierinfo-screen-li">
                    <div class="supplierinfoscreen-li-title">供应商单位:&nbsp;</div>
                    <el-input size="small" v-model="value" placeholder="请输入内容"></el-input>
                </div>
                <div class="supplierinfo-screen-li">
                    <div class="supplierinfoscreen-li-title">供应商电话:&nbsp;</div>
                    <el-input size="small" v-model="value" placeholder="请输入内容"></el-input>
                </div>
                <el-button size="small" type="primary">查询</el-button>
            </div>
            <el-button size="small" type="primary">新增数据</el-button>
        </div>
        <div class="supplierinfo-table">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="date"
                label="日期"
                width="180">
                </el-table-column>
                <el-table-column
                prop="name"
                label="姓名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="address"
                label="地址">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
        </div>
    </div>
</template>
<script>                 
export default {
    data () {
        return {
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value: '',
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
            }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
            }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
            }],
            currentPage4: 4
        }
    },
    methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        testfun(){
            var kvArray = [["key1", "value1"], ["key2", "value2"]];
            // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
            var myMap = new Map(kvArray);
            console.log(myMap)
            // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
            var outArray = Array.from(myMap);
            console.log(outArray)
            var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
            var second = new Map([[1, 'uno'], [2, 'dos']]);
            
            // 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
            var merged = new Map([...first, ...second]);
            console.log(merged);

            let mySet = new Set();
            // mySet.add(1); // Set(1) {1}
            // mySet.add(5); // Set(2) {1, 5}
            // mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
            // mySet.add("some text"); 
            // Set(3) {1, 5, "some text"} 这里体现了类型的多样性
            var o = {a: 1, b: 2}; 
            mySet.add(o);
            // mySet.add({a: 1, b: 2}); 
            console.log(mySet);
        }
    },
    mounted(){
        this.testfun()
    }
}
</script>
<style>
.supplierinfo-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.supplierinfo-screen{
    display: flex;
    justify-content: space-between;
}
.supplierinfo-screen-ul{
    display: flex;
}
.supplierinfo-screen-li{
    width: 280px;
    display: flex;
    align-items: center;
}
.supplierinfoscreen-li-title{
    width: 80px;
    text-align: end;
    font-size: 14px;
    color: #555;
}
.supplierinfo-screen-li .el-input{
    width: 184px;
}
.supplierinfo-screen-li .el-select{
    width: 184px;
}
.supplierinfo-table{
    margin-top: 15px;
}
.supplierinfo-table .block{
    margin-top: 20px;
    text-align: center;
}
</style>