Vue_New/src/xt_pages/outpatientDoctorStation/components/prescriptionTable.vue

<template>
    <div class="prescriptionTable">
        <el-table :data="tableData" border style="width: 98%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
            <el-table-column align="center" type="selection" width="40"></el-table-column>
            <el-table-column align="center" type="index" width="40" label="序号"></el-table-column>
            <el-table-column align="center" prop="name" label="名称">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column align="center" prop="name" width="50" label="组套">
                <template slot-scope="scope">
                    <el-select v-model="value" placeholder="">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" width="50" :label="'单次\n用量'">
                <template slot-scope="scope">
                    <el-input v-model="input" placeholder=""></el-input>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" width="50" label="用法">
                <template slot-scope="scope">
                    <el-select v-model="value" placeholder="">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" width="50" label="频率">
                <template slot-scope="scope">
                    <el-select v-model="value" placeholder="">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" width="50" label="天数">
                <template slot-scope="scope">
                    <el-select v-model="value" placeholder="">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" width="100" label="总量">
                <template slot-scope="scope">
                    <div style="display:flex;">
                        <el-input v-model="input" style="width:50%" placeholder=""></el-input>
                        <el-select v-model="value" style="width:50%" placeholder="">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" width="50" label="单价">
                <template slot-scope="scope">
                    <el-input v-model="input" placeholder=""></el-input>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" width="50" label="备注">
                <template slot-scope="scope">
                    <el-autocomplete
                    class="inline-input"
                    v-model="state1"
                    :fetch-suggestions="querySearch"
                    placeholder=""
                    @select="handleSelect"
                    ></el-autocomplete>
                </template>
            </el-table-column>
            <el-table-column align="center" width="40" prop="name" label="操作">
                <template slot-scope="scope">
                    <i class="el-icon-delete"></i>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data(){
        return{
            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 弄'
            },{
            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 弄'
            }],
            options: [{
            value: '1',
            label: '1'
            }, {
            value: '2',
            label: '2'
            }, {
            value: '3',
            label: '3'
            }, {
            value: '4',
            label: '4'
            }, {
            value: '5',
            label: '5'
            }],
            value:''
        }
    }
}
</script>

<style lang="scss">
.prescriptionTable{
    .el-table th .cell, .el-table td .cell{
        padding: 0 2px;
        white-space: pre-line;
    }
    .el-icon-delete{
        color:red;
    }
}
</style>