UNPKG

el-table-edit

Version:

一个基于element-ui的可编辑表格组件

131 lines (128 loc) 3.51 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="./dist/el-table-edit.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link rel="stylesheet" href="./dist/el-table-edit.min.css"> </head> <body> <div id="app"> <el-table-edit :data="tableData" :columns="columns" border style="width: 100%"> </el-table-edit> </div> <script> new Vue({ el: "#app", data() { return { columns: [ // { // type:'index', // index:index => index * 2, // fixed:'left' // }, { type:"selection", fixed:'left' }, { title: "关联角色", key: "roleName", width: 100, fixed:"left" }, { title: "用户名", key: "userName", edit: true, rules: [ { required: true, message: "请输入用户名" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", }, ], clearable: true, }, { title: "用户密码", key: "password", edit: true, clearable: true, }, { title: "姓名", key: "name", edit: true, clearable: true, }, { title: "性别", key: "sex", type: "select", options: [ { label: "未知", value: "0", }, { label: "男", value: "1", }, { label: "女", value: "2", }, ], edit: true, clearable: true, }, { title: "联系电话", key: "phone", edit: true, clearable: true, }, { title: "邮箱", key: "email", edit: true, clearable: true, }, ], tableData: [ { id: "11111", userName: "admin", password: "123456", name: "蔡海", sex: "男", phone: "155********", email: "ch155********@163.com", roleId: "", roleName: "admin", }, { id: "22222", userName: "admin", password: "123456", name: "蔡海", sex: "男", phone: "155********", email: "ch155********@163.com", roleId: "", roleName: "admin", }, ], } } }); </script> </body> </html>