js模拟ElementUI风格,创建table列表的实例方法

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;
                    }
                }
            }
        }
    }
}