elizebeth/src/xt_pages/data/components/manufacturer.vue

<template>
    <div class="page_manufacturer">
        <div style="display:flex;justify-content: space-between;width:100%;margin-bottom:20px;">
            <div class="cell clearfix" style="margin-bottom:0;">
                <el-input style="width: 180px;margin-right:10px;" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
                <el-button style="margin-right:10px;" class="filter-item" type="primary" icon="el-icon-search" @click="searchAction">搜索</el-button>
            </div>
            <el-button type="primary" @click="openForm(0)">新增</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)', color: '#606266'}">
            <el-table-column prop="date" label="自编码" width="80" align="center"></el-table-column>
            <el-table-column prop="date" label="名称" align="center"></el-table-column>
            <el-table-column prop="date" label="拼音助记符" align="center"></el-table-column>
            <el-table-column prop="date" label="五笔助记符" align="center"></el-table-column>
            <el-table-column prop="date" label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button @click="openForm(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <add-manufacturer ref="addManufacturer"></add-manufacturer>
    </div>
</template>

<script>
import addManufacturer from './addManufacturer'
export default {
    components:{
        addManufacturer
    },
    data(){
        return{
            search_input:'',
            options: [{
            value: '1',
            label: '是'
            }, {
            value: '2',
            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 弄'
            }]
            
        }
    },
    methods:{
        searchAction(){},
        clickSelfPayment(){
            this.$refs.selfPayment.show();
        },
        clickMainTain(){
            // this.$refs.maintain.show();
        },
        openForm(id){
            this.$refs.addManufacturer.show(id);
        }
    }
}
</script>