前面了解了EasyUI和LayUI，这两款前端开发框架很好，如果要论流行和热度显然不及ElementUI。

　　昨天晚上看了ElementUI，界面、功能、与Vue.js的配合的确是好，使得开发者更专注于界面设计和功能实现，其实，EasyUI和LayUI也应该可以的，为什么就没有这方面的开发案例呢？

　　实现了表格数据的修改和删除，增加也一样，按钮不好放就没有做，分页要连接数据库，暂时也没有做，后面再做，原理是相通的。

　　EasyUI和LayUI使用上都差不多，ElementUI有点别扭，但必须适应。

　　实现的界面：

　　计算机的配置信息多，为了在一个页面显示，集中起来，鼠标移动到详细信息字段上再显示，备注信息也是这样处理的，还可以处理图片，后面加二维码。

　　修改界面：

　　删除界面：

　　主页面computerList.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./CSS/computerList.css">
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <title>Vue.js+Element-UI</title>
</head>
</body>
    <div id="app">
        <h1>计算机设备列表</h1>

        <div class="dataList">

            <template>
                <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center', backgroundColor: '#f9f9f9' }">
                    <!-- <el-table-column prop="" type="index" label="序号" width="50"></el-table-column> -->
                    <el-table-column prop="" label="操作" width="120" style="text-align: center;display:block;">
                        <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" @click="editRecord(scope.row,scope.$index)" circle></el-button>
                                <el-button type="danger" icon="el-icon-delete" @click="delRecord(scope.$index)" circle></el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="" label="序号" width="50"><template slot-scope="scope">{{scope.$index + 1 }}</template></el-table-column>
                    <el-table-column prop="C01" label="资产编号" width="160"></el-table-column>
                    <el-table-column prop="C02" label="资产类型" width="80"></el-table-column>
                    <el-table-column prop="C03" label="设备出厂类型" width="220"></el-table-column>
                    <el-table-column prop="C04" label="设备出厂编号" width="200"></el-table-column>
                    <el-table-column prop="C12" label="生产日期" width="100"></el-table-column>
                    <el-table-column prop="C13" label="生产商" width="80"></el-table-column>
                    <el-table-column prop="C14" label="购置时间" width="100"></el-table-column>
                    <el-table-column prop="C15" label="保修截止时间" width="120"></el-table-column>
                    <el-table-column prop="C16" label="购置渠道" width="100"></el-table-column>
                    <el-table-column prop="C17" label="价格" width="80"></el-table-column>
                    <el-table-column prop="C18" label="资产状态" width="80"></el-table-column>
                    <el-table-column prop="C20" label="财务资产编码" width="150"></el-table-column>

                    <el-table-column label="配置参数" width="100">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                            <p>CPU: {{ scope.row.C05 }}</p>
                            <p>内存大小: {{ scope.row.C06 }}</p>
                            <p>硬盘大小: {{ scope.row.C07 }}</p>
                            <p>主板: {{ scope.row.C08 }}</p>
                            <p>显卡: {{ scope.row.C09 }}</p>
                            <p>声卡: {{ scope.row.C10 }}</p>
                            <p>MAC地址: {{ scope.row.C11 }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">详细信息</el-tag>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column label="简要说明" width="100">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p>{{ scope.row.C20 }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">备注说明</el-tag>
                        </div>
                        </el-popover>
                    </template>
                    </el-table-column>

                </el-table>

                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagePara.pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagePara.page-size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="recordCount">
                </el-pagination>

            </template>

        </div>

        <el-dialog title="修改信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
                <div>

                    <el-form ref="form" :model="computerInfo" label-width="80px">

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="资产编号">
                                    <el-input v-model="computerInfo.C01"></el-input>
                                </el-form-item>
                
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="资产类型">
                                    <el-select v-model="computerInfo.C02" placeholder="请选择资产类型">
                                    <el-option label="台式机" value="台式机"></el-option>
                                    <el-option label="一体机" value="一体机"></el-option>
                                    <el-option label="笔记本" value="笔记本"></el-option>
                                    <el-option label="服务器" value="服务器"></el-option>
                                    </el-select>
                                </el-form-item>
                
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="出厂类型">
                                    <el-input v-model="computerInfo.C03"></el-input>
                                </el-form-item>  
                
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="出厂编号">
                                    <el-input v-model="computerInfo.C04"></el-input>
                                </el-form-item>  
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="CPU">
                                    <el-input v-model="computerInfo.C05"></el-input>
                                </el-form-item>  
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="内存大小">
                                    <el-input v-model="computerInfo.C06"></el-input>
                                </el-form-item>  
                        
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="硬盘大小">
                                    <el-input v-model="computerInfo.C07"></el-input>
                                </el-form-item>  
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="主板">
                                    <el-input v-model="computerInfo.C08"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="显卡">
                                    <el-input v-model="computerInfo.C09"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="声卡">
                                    <el-input v-model="computerInfo.C10"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="MAC地址">
                                    <el-input v-model="computerInfo.C11"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="生产日期">
                                    <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C12" style="width: 200px;"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                        
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="生产商">
                                    <el-input v-model="computerInfo.C13"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="购置时间">
                                    <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C14" style="width: 200px;"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">
                                    <el-form-item label="保修时间">
                                        <el-col :span="11">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C15" style="width: 200px;"></el-date-picker>
                                        </el-col>
                                    </el-form-item>
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="购置渠道">
                                    <el-input v-model="computerInfo.C16"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple">

                                <el-form-item label="价格">
                                    <el-input v-model="computerInfo.C17"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="10"><div class="grid-content bg-purple">

                                <el-form-item label="资产状态">
                                    <el-checkbox-group v-model="computerInfo.C18">
                                    <el-checkbox label="正常使用" name="C18"></el-checkbox>
                                    <el-checkbox label="维修" name="C18"></el-checkbox>
                                    <el-checkbox label="库存" name="C18"></el-checkbox>
                                    <el-checkbox label="报废" name="C18"></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                        
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="财务编码">
                                    <el-input v-model="computerInfo.C20"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="16"><div class="grid-content bg-purple">

                                <el-form-item label="备注">
                                    <el-input v-model="computerInfo.C19"></el-input>
                                </el-form-item>
                
                            </div></el-col>
                        </el-row>

                    </el-form>

                </div>

                <span slot="footer" class="dialog-footer" style="text-align: center;display:block;">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitUpdate()">确 定</el-button>
                </span>
        
        </el-dialog>

    </div>
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>    
    <script src="./JavaScript/computerList.js"></script>

</body>
</html>

 　　代码界面computerList.js：

var VueDataObj={
  dialogVisible:false,//修改信息窗口的显示
  editRecordIndex:0,//点击编辑后选中的行
  pagePara:{
      pageNum:1,
      pageSize:5,
  },
  recordCount:12,
  computerInfo:{
        C01:'',//资产编号
        C02:'',//资产类型
        C03:'',//设备出厂类型
        C04:'',//设备出厂编号
        C05:'',//CPU
        C06:'',//内存大小
        C07:'',//硬盘大小
        C08:'',//主板
        C09:'',//显卡
        C10:'',//声卡
        C11:'',//MAC地址
        C12:'',//生产日期
        C13:'',//生产商
        C14:'',//购置时间
        C15:'',//保修截止时间
        C16:'',//购置渠道
        C17:'',//价格
        C18:'',//资产状态
        C19:'',//简要说明
        C20:'',//财务资产编码
     },
     tableData:[]
};

var methods={
  delRecord(rowId){
    this.$confirm('是否确定删除该记录？')
    .then(_ => {
      this.tableData.splice(rowId,1);
    })
    .catch(_ => {});    
  },
  handleClose(){
    this.dialogVisible=false;
  },
  editRecord(row,selectRowIndex){
    // console.log(row);
    this.editRecordIndex=selectRowIndex;
    this.computerInfo={
      C01:row.C01,
      C02:row.C02,
      C03:row.C03,
      C04:row.C04,
      C05:row.C05,
      C06:row.C06,
      C07:row.C07,
      C08:row.C08,
      C09:row.C09,
      C10:row.C10,
      C11:row.C11,
      C12:row.C12,
      C13:row.C13,
      C14:row.C14,
      C15:row.C15,
      C16:row.C16,
      C17:row.C17,
      C18:row.C18,
      C19:row.C19,
      C20:row.C20, 
    };
    this.dialogVisible=true;
  },
  submitUpdate(){
    Vue.set(this.tableData,this.editRecordIndex,this.computerInfo);
    this.dialogVisible=false;
  },
  getAllRecord(){
    console.log("数组赋值");
    this.tableData=[{
      C01: 'YQCY-001-001-0001',
      C02: '台式机',
      C03: 'ThinkCenter M6500t-NO56',
      C04:'1234567890000000890',
      C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
      C06:'8',
      C07:'1000',
      C08:'',
      C09:'NVIDIA GeForce GT 730',
      C10:'Realtek High Definition Audio',
      C11:'1234-1234-1234',
      C12:'2018-12-31',
      C13:'联想',
      C14:'2019-12-31',
      C15:'2029-12-31',
      C16:'自购',
      C17:'9000',
      C18:'正常使用',
      C19:'这是一段简要的文字描述',
      C20:'101000024298',
    }, {
     C01: 'YQCY-001-001-0041',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'11111111123455555',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'DELL',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }, {
     C01: 'YQCY-001-001-0501',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'1234567890111122225',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'IBM',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }, {
      C01: 'YQCY-001-001-0033',
      C02: '台式机',
      C03: 'ThinkCenter M6500t-NO56',
      C04:'12345678901234567890',
      C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
      C06:'8',
      C07:'1000',
      C08:'',
      C09:'NVIDIA GeForce GT 730',
      C10:'Realtek High Definition Audio',
      C11:'1234-1234-1234',
      C12:'2018-12-31',
      C13:'HUAWEI',
      C14:'2019-12-31',
      C15:'2029-12-31',
      C16:'自购',
      C17:'9000',
      C18:'正常使用',
      C19:'这是一段简要的文字描述',
      C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0021',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'服务器',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '笔记本',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '笔记本',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '一体机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }];

  }
};

var computed={};

var watch={};

var vm=new Vue({
    el:'#app',
    data:VueDataObj,
    methods,
    computed,
    watch,
    created:function(){
      this.getAllRecord();
    }
})

　　样式文件computerList.css：

#app {
    width:100%;
    margin:0 auto;
    text-align: center;
}

.el-table td, .el-table th {
    text-align: center;
} 
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 220px;
}

　　说明：

　　1、ElementUI参考页面地址：Element - The world's most popular Vue UI framework

　　2、ElementUI专注界面设计，数据处理可以使用Vue.js来处理。

　　3、信息折叠很好，对于字段很多的表的显示比较友好。比如：

                    <el-table-column label="配置参数" width="100">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                            <p>CPU: {{ scope.row.C05 }}</p>
                            <p>内存大小: {{ scope.row.C06 }}</p>
                            <p>硬盘大小: {{ scope.row.C07 }}</p>
                            <p>主板: {{ scope.row.C08 }}</p>
                            <p>显卡: {{ scope.row.C09 }}</p>
                            <p>声卡: {{ scope.row.C10 }}</p>
                            <p>MAC地址: {{ scope.row.C11 }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">详细信息</el-tag>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>


　　它将计算机的配置信息集中展示，可以信息的任意处理和组合，而且还可以是动态的。

　　4、表头字段的居中和背景颜色可以通过设置样式来实现：

<el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center', backgroundColor: '#f9f9f9' }">

　　5、一般标签居中的样式为（设置为块元素）：

style="text-align: center;display:block;"

　　6、Vue.js代码太长，我是分开写：

//定义数据
var VueDataObj={};
//定义方法
var methods={};
//定义计算属性
var computed={};
//定义监视
var watch={};
//定义Vue
var vm=new Vue({
    el:'#app',
    data:VueDataObj,
    methods,
    computed,
    watch,
    created:function(){}
})
# elementui # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue