修改以下代码中表格样式,使其样式与elementplus表相同 代码:var popup = document.createElement('div'); var closeBtn = document.createElement('span'); var table = document.createElement('table'); var thead = document.createElement('thead'); var tbody = document.createElement('tbody'); table.style.borderCollapse = 'collapse'; var tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>'; let tableBody = '' for (let i = 0; i < dom.tableData.length; i++) { const obj = dom.tableData[i] tableBody = tableBody + '<tr><td>'+ obj.dataId +'</td><td>'+ obj.type +'</td><td>'+ obj.dataName +'</td><td><button class="info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>' } thead.innerHTML = tableHead; tbody.innerHTML = tableBody;
时间: 2024-02-14 09:07:31 浏览: 90
以下是修改后的代码,样式与elementplus表相同:
```javascript
var popup = document.createElement('div');
var closeBtn = document.createElement('span');
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
table.classList.add('el-table');
table.classList.add('el-table--border');
table.classList.add('el-table--fit');
var tableHead = '<tr><th class="is-leaf">映射对象id</th><th class="is-leaf">映射对象类型</th><th class="is-leaf">映射对象名称</th><th class="is-leaf">操作</th></tr>';
let tableBody = '';
for (let i = 0; i < dom.tableData.length; i++) {
const obj = dom.tableData[i];
tableBody = tableBody + '<tr><td class="cell">'+ obj.dataId +'</td><td class="cell">'+ obj.type +'</td><td class="cell">'+ obj.dataName +'</td><td class="cell"><button class="el-button el-button--text is-plain info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>';
}
thead.innerHTML = tableHead;
tbody.innerHTML = tableBody;
table.appendChild(thead);
table.appendChild(tbody);
popup.appendChild(table);
```
这里我们使用了elementplus表格的样式类,同时添加了一些特定的类名来使表格样式更符合elementplus表格的样式。需要注意的是,如果您想使用elementplus的表格样式,最好使用elementplus的表格组件,以避免样式冲突。
阅读全文