欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

需求:基于elementui在表格里面可输入

程序员文章站 2022-06-07 11:16:43
...

需求:基于elementui在表格里面可输入

要怎么实现呢?我们的思路肯定是在表格里面放input,然后把input边框隐藏起来,就可以做到表格可输入

需求:基于elementui在表格里面可输入

//template里
<table>
     <tr>
         <th>地区</th>
         <th>人数</th>
     </tr>
      <tr>
         <td>上海区</td>
         <td>
         	<el-input v-model="dataForm.rmks" style="border: none"></el-input>
         </td>
      </tr>
      <tr>
         <td>北京区</td>
         <td>
            <el-input v-model="dataForm.seq" style="border: none"></el-input>
         </td>
      </tr>
</table>
//scss里面写入,主要是深度选择器可以隐藏input边框 
table, th, td {
    border: 1px solid #d6d6d6;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table {
    td, th {
      padding: 0;
    }

    td {
      text-align: center;

      /deep/ .el-input__inner {
        border: none
      }
    }

    width: 100%;
  }