在以下代码中优化表格样式类似于elementplus的样式，并且不引入elementplus的样式，并且增加分页 代码： 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;

可以通过以下方式优化表格样式，同时增加分页功能：

HTML代码：

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th>映射对象id</th>
        <th>映射对象类型</th>
        <th>映射对象名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格数据 -->
    </tbody>
  </table>
</div>
<div class="pagination">
  <!-- 分页代码 -->
</div>

CSS代码：

.table-container {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.5;
}

.table th,
.table td {
  text-align: left;
  padding: 12px 15px;
  border-bottom: 1px solid #e4e7ed;
}

.table th {
  color: #48576a;
  font-weight: 500;
  background-color: #f5f6fa;
}

.table td {
  color: #48576a;
}

.table tbody tr:nth-child(even) {
  background-color: #f8f9fc;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 10px 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  color: #48576a;
  cursor: pointer;
}

.pagination button.active {
  background-color: #2196f3;
  color: #fff;
}

JavaScript代码：

// 获取表格元素和分页元素
const table = document.querySelector('.table');
const tbody = table.querySelector('tbody');
const pagination = document.querySelector('.pagination');

// 每页显示的条数
const pageSize = 10;

// 渲染表格数据
function renderTable(pageNum) {
  // 清空表格数据
  tbody.innerHTML = '';

  // 计算起始索引和结束索引
  const startIndex = (pageNum - 1) * pageSize;
  const endIndex = startIndex + pageSize;

  // 循环渲染表格数据
  for (let i = startIndex; i < endIndex && i < dom.tableData.length; i++) {
    const obj = dom.tableData[i];
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <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>
    `;
    tbody.appendChild(tr);
  }
}

// 渲染分页按钮
function renderPagination() {
  // 计算总页数
  const totalPage = Math.ceil(dom.tableData.length / pageSize);

  // 清空分页数据
  pagination.innerHTML = '';

  // 循环渲染分页按钮
  for (let i = 1; i <= totalPage; i++) {
    const button = document.createElement('button');
    button.innerText = i;
    if (i === 1) {
      button.classList.add('active');
    }
    button.addEventListener('click', function() {
      // 切换分页按钮的样式
      pagination.querySelector('.active').classList.remove('active');
      button.classList.add('active');

      // 渲染表格数据
      renderTable(i);
    });
    pagination.appendChild(button);
  }
}

// 初始化表格和分页
renderTable(1);
renderPagination();

通过以上代码，实现了表格样式的优化和分页功能的增加，同时没有引入elementplus的样式。注意，以上代码仅供参考，需要根据实际情况进行调整。