065.el-table 表格宽度拖拽.html

﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <!-- import Vue before Element -->
    <script src="./assets/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="./assets/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="amount1" sortable label="数值 1">
            </el-table-column>
            <el-table-column prop="amount2" sortable label="数值 2">
            </el-table-column>
            <el-table-column prop="amount3" sortable label="数值 3">
            </el-table-column>
        </el-table>
    </div>
</body>

<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [{
                    id: '12987122',
                    name: '王小虎',
                    amount1: '234',
                    amount2: '3.2',
                    amount3: 10
                }, {
                    id: '12987123',
                    name: '王小虎',
                    amount1: '165',
                    amount2: '4.43',
                    amount3: 12
                }, {
                    id: '12987124',
                    name: '王小丫',
                    amount1: '324',
                    amount2: '1.9',
                    amount3: 9
                }, {
                    id: '12987125',
                    name: '王小丫',
                    amount1: '621',
                    amount2: '2.2',
                    amount3: 17
                }, {
                    id: '12987126',
                    name: '王小丫',
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15
                }]
            }
        },
        mounted() {
        },
        methods: {
        }
    })


</script>

</html>