Vue——框架推荐

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

如果能够理解前面几篇的内容，还需要了解脚手架的搭建的路由的配置，就能满足大部分功能的开发。，

尝试使用了ElementUI和IView，感觉IView的封装组件更加好看些，

我是做管理平台，table用的比较多，比较注重table的实现方案，

iView的table全部通过Js代码决定，我不是很喜欢这种方式，暂时还是选择了ElementUI。

IView官网：https://www.iviewui.com/

ElementUI官网：http://element-cn.eleme.io/#/zh-CN

其它基于Vue的框架：https://www.cnblogs.com/tkzc2013/p/8127294.html

IView的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        .ivu-table .demo-table-info-row td {
            background-color: #2db7f5;
            color: #fff;
        }
        .ivu-table .demo-table-error-row td {
            background-color: #ff6600;
            color: #fff;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="res/iview.css">
    <script type="text/javascript" src="res/vue.min.js"></script>
    <script type="text/javascript" src="res/iview.min.js"></script>
    <title>IView测试</title>
</head>
<body>
<div id="app">
    <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            columns1: [
                {
                    title: 'Name',
                    key: 'name'
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address'
                }
            ],
            data1: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2016-10-02'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2016-10-04'
                }
            ]
        },
        methods: {
            rowClassName: function (row, index) {
                if (index === 1) {
                    return 'demo-table-info-row';
                } else if (index === 3) {
                    return 'demo-table-error-row';
                }
                return '';
            }
        }
    });
</script>
</body>
</html>

ElementUI的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="res/index.css">
    <!-- import Vue before Element -->
    <script src="res/vue2.js"></script>
    <!-- import JavaScript -->
    <script src="res/index.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="date"
                label="日期"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
                width="120">
        </el-table-column>
        <el-table-column
                prop="city"
                label="市区"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="300">
        </el-table-column>
        <el-table-column
                prop="zip"
                label="邮编"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
                           type="text" size="small">移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }]
        },
        methods: {
            handleClick: function (row) {
                alert(row);
            },
            deleteRow: function (index, rows) {
                rows.splice(index, 1);
            }
        }
    });
</script>
</body>
</html>

以上是 Vue——框架推荐 的全部内容， 来源链接： utcz.com/z/379747.html

回到顶部