Vue通过组件实现简单的表格部门分组

效果图:
Vue通过组件实现简单的表格部门分组_第1张图片
html代码:

<!doctype html>
<html lang="en">

<head>
    <title>部门分组</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <emp deptno="1"></emp>
        <emp deptno="2"></emp>
    </div>
    <!-- ,'uid','name','job' -->
</body>
<script src="vue.min.js"></script>
</html>

js代码:

<script>
    Vue.component("emp", {
        props: ['deptno'],
        data() {
            return {

                msg: [
                    {
                    uid: '1',
                    name: '李小芳',
                    job: 'java工程师',
                    deptno: '1',
                },
                {
                    uid: '2',
                    name: '王芳',
                    job: 'java工程师',
                    deptno: '2',
                    },
                {
                    uid: '3',
                    name: '李小冉',
                    job: 'java工程师',
                    deptno: '2',
                    },
                    {
                     uid: '4',
                    name: '张爱珊',
                    job: '前端工程师',
                    deptno: '2',
                    },
                    {
                    uid: '5',
                    name: '杨五六',
                    job: 'C++工程师',
                    deptno: '1',
                    }
            ],
            }
        },
        template: `
            
员工编号 员工姓名 职务 部门编号
{{v.uid}} {{v.name}} {{v.job}} {{v.deptno}}
`
, }) let vm = new Vue({ el: '#app' }) </script>

你可能感兴趣的:(Vue通过组件实现简单的表格部门分组)