<template>
    <el-table
            :data="tableData"
            :header-cell-style="headerStyle"
            border
            stripe
            fit
            style="width: 100%;margin-top: 25px;">
        <el-table-column
                fixed
                prop="ColumnName"
                label="字段名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="Description"
                min-width="200"
                label="说明">
        </el-table-column>
        <el-table-column
                prop="ColumnType"
                min-width="120"
                label="类型">
        </el-table-column>
        <el-table-column
                prop="CharMaxLength"
                min-width="60"
                label="长度">
        </el-table-column>
        <el-table-column
                prop="Nullable"
                align="center"
                label="不是 null">
        </el-table-column>
        <el-table-column
                prop="Default"
                min-width="260"
                label="默认值">
        </el-table-column>
    </el-table>
</template>

<script>
    import Vue from "vue";
    import ElementUI from "element-ui";
    import Axios from "axios";
    import "element-ui/lib/theme-chalk/index.css";
    import Opt from "../opt"

    Vue.use(ElementUI);

    export default{
        data: function () {
            return {
                tableData: [],
                headerStyle: {
                    backgroundColor: '#e1e4e5',
                    color: '#2b2b2b',
                    lineHeight: '30px'
                }, // 列表样式
            };
        },
        components: {},
        created: function () {
            this.getData()
        },
        mounted: function () {
            // alert(this.schema);
        },
        props: ["sys", "schema", "table"],
        computed: {},
        methods: {
            getData(){
                Axios.get(`${Opt.databaseDoc[this.sys]}/--database-doc--/column-list?schema=${this.schema}&table=${this.table}`,{}).then(res=>{
                    this.tableData = res.data;
                })
            }
        },
    }
</script>

<style scoped>
    /deep/ table{
        margin: 0;
    }
</style>