TxProject/src/views/KnowledgeSearch/components/FaultTree.vue

<template>
    <el-row :gutter="20">
        <el-col :span="4">
            <el-card>
                <div class=" bg-gray-300 p-3 font-bold text-gray-600">结构树</div>
                <el-tree default-expand-all :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-card>
        </el-col>
        <el-col :span="20">
            <el-form :inline="true" :model="formInline" size='small ' label-position="left" label-width="110px"
                class="demo-form-inline">
                <el-form-item label="产品名称：">
                    <el-input v-model="formInline.user" placeholder="产品名称"></el-input>
                </el-form-item>
                <el-form-item label="产品代号：">
                    <el-input v-model="formInline.user" placeholder="产品代号"></el-input>
                </el-form-item>
                <el-form-item label="系统名称：">
                    <el-input v-model="formInline.user" placeholder="系统名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                    <el-button type="normal" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData" stripe border style="width: 100%" header-cell-class-name="own-cell">
                <el-table-column align="center" type="index" width="50">
                </el-table-column>
                <el-table-column prop="date" align="center" label="分系统">
                </el-table-column>
                <el-table-column prop="name" align="center" label="所属部件">
                </el-table-column>
                <el-table-column prop="name" align="center" label="文件名">
                </el-table-column>
                <el-table-column prop="name" align="center" label="描述">
                </el-table-column>
                <el-table-column prop="name" align="center" label="编辑时间">
                </el-table-column>
                <el-table-column align="center" label="查看">
                    <template slot-scope="scope">
                        <el-button type="text">故障树模型</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class=" mt-3 mr-6 flex items-center justify-end">
                <el-pagination background layout="prev, pager, next" :total="21">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
</template>
<script>
export default {
    name: 'FaultTree',
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            data: [{
                label: '控制系统',
                children: [{
                    label: '组合装置',
                    children: [{
                        label: '惯组'
                    }]
                }, {
                    label: '飞控计算机',
                    children: [{
                        label: '飞控软件'
                    }]
                }]
            }],
            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 弄'
            }]
        }
    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
        }
    }
};
</script>
<style scoped lang="scss">
</style>