{% extends 'base.html' %}

{% block title %}模型列表{% end %}

{% block head %} {% end %}

{% block main %}

<div id="ModelsList">
    <template>
        <el-table :data="model_data" border style="width: 100%">
            <el-table-column
                    fixed
                    prop="model_id"
                    label="模型ID"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="feature_name"
                    label="特征名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="set_data"
                    label="集合数据集">
            </el-table-column>

            <el-table-column
                    prop="create_at"
                    label="创建时间">
            </el-table-column>

            <el-table-column
                    prop="update_at"
                    label="更新时间">
            </el-table-column>

            <el-table-column width="100" fixed="right" label="操作">

                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>


<script>
    var Models = {
        methods: {
            handleClick(row) {
                console.log(row);
            }
        },
        data() {
            return {
                model_data: [{
                    model_id: '1',
                    feature_name: 'f1,f2',
                    set_data: '上海',
                    create_at: '2019-06-01',
                    update_at: '2019-06-02'
                }]
            }
        }
    };
    var Ctor = Vue.extend(Models);
    new Ctor().$mount('#ModelsList');

</script>
{% end %}

{% block footer %}
{% end %}