el-table-edit
Version:
一个基于element-ui的可编辑表格组件
131 lines (128 loc) • 3.51 kB
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>