js模拟ElementUI风格,创建table列表的实例方法
效果如下:
html代码:
// 引入css
<link rel="stylesheet" href="index3.css">
// 引入js方法
<script src="index3.js"></script>
// 创建列表盒子DOM
<div id="box"></div>
// 实例化方法
<script>
let aa = {
id: 'box',
head: [
{
label: '放射源等级',
props: 'a',
flex: 1
},
{
label: '放射源类型',
props: 'b',
flex: 2
},
{
label: '操作',
flex: 1,
template: [{
label: '查看',
type: 'info',
clickName: 'handleView'
}, {
label: '编辑',
type: 'edit',
clickName: 'handleEdit'
}, {
label: '删除',
type: 'delete',
clickName: 'handleDelete'
}]
}
],
data: [
{a: '一级', b: 'abd-1', c: '是多少'},
{a: '二级', b: 'cL-2', c: 'woewie'},
{a: '三级', b: 'cL-3', c: 'woewie'},
{a: '四级', b: 'cL-4', c: 'woewie'},
{a: '五级', b: 'cL-5', c: 'woewie'},
{a: '六级', b: 'cL-6', c: 'woewie'},
{a: '七级', b: 'cL-7', c: 'woewie'},
{a: '八级', b: 'cL-8', c: 'woewie'},
],
methods: { // 如果没有自定义列,不需要methods属性
handleEdit: function (data) { // 编辑
console.log(data)
},
handleDelete: function (index) { // 删除
this.obj.data.splice(index, 1);
new selfTable(aa);
},
handleView: function (data) { // 查看
console.log(data)
}
}
};
// 实例化列表方法
let bb = new selfTable(aa);
</script>
css文件代码:
html, body, div, p, span {
margin: 0;
padding: 0;
}
.tlist {
height: 30px;
display: flex;
align-items: center;
text-align: center;
}
.thead {
background: #409EFF;
color: #fff;
height: 50px;
font-weight: 800;
border: 1px solid #ccc;
}
.tbody {
border: 1px solid #ccc;
}
.tbody .tlist {
background: #ECF5FF;
color: #409EFF;
}
.tbody .tlist + .tlist {
border-top: 1px solid #ccc;
}
.noDataShow {
min-height: 120px;
background: #ECF5FF;
color: #409EFF;
display: flex;
justify-content: center;
align-items: center;
}
.self-col span {
padding: 3px 5px;
margin: 0 5px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
.self-col span.info {
background: #909399;
color: #fff;
}
.self-col span.edit {
background: #409EFF;
color: #fff;
}
.self-col span.delete {
background: #F56C6C;
color: #fff;
}
js方法代码如下:
function selfTable(obj) {
let self = this;
self.obj = obj;
let headStr = '';
for (let i = 0, len = obj.head.length; i < len; i++) {
let item = obj.head[i];
headStr += '<p style = "flex:' + item.flex + '">' + item.label + '</p>'
}
let str = '<div class="tlist thead">' + headStr + '</div><div class="tbody" id="tbody_wjz">'
if (obj.data && obj.data.length > 0) {
// 仅在有数据时,拼接列表,否则显示"暂无数据"
for (let i = 0, len = obj.data.length; i < len; i++) {
// 拼接table列表
let item = obj.data[i];
str += '<div class="tlist">'
for (let j = 0, len2 = obj.head.length; j < len2; j++) {
let item2 = obj.head[j];
for (let k in item) {
// 当表头属性跟数据属性一致时,拼接到列表
if (item2.props == k) {
str += '<p style = "flex:' + item2.flex + '">' + item[k] + '</p>'
}
}
// 拼接自定义列
if (item2.template) {
let str2 = '<p class="self-col" style = "flex:' + item2.flex + '">';
for (let kk = 0, len3 = item2.template.length; kk < len3; kk++) {
let item3 = item2.template[kk];
str2 += '<span class="' + item3.type + '" clickname="' + item3.clickName + '">' + item3.label + '</span>'
}
str2 += '</p>';
str += str2;
}
}
str += '</div>'
}
} else {
str += '<div class="noDataShow">暂无数据</div>'
}
str += '</div>';
document.getElementById(obj.id).innerHTML = str;
// 获取自定义方法
if (obj.methods) {
for (let i in obj.methods) {
self[i] = obj.methods[i]
}
let arrLength = obj.data.length;
for (let j = 0, len = arrLength; j < len; j++) {
for (let i = 0, len2 = obj.head[obj.head.length - 1].template.length; i < len2; i++) {
let item = obj.head[obj.head.length - 1].template[i];
document.getElementsByClassName(item.type)[j].onclick = function () {
switch (item.type) {
case 'delete':
self[document.getElementsByClassName(item.type)[j].attributes['clickname'].nodeValue](j);
break;
case 'info':
self[document.getElementsByClassName(item.type)[j].attributes['clickname'].nodeValue](self.obj.data[j]);
break;
case 'edit':
self[document.getElementsByClassName(item.type)[j].attributes['clickname'].nodeValue](self.obj.data[j]);
break;
}
}
}
}
}
}