why

公司要做一个后台项目需要用到大量的表格样式，ui库公司给的是用elment ui下图看看公司需要的样式

how

大多都是这样样式的，这种其实用ul li 也是可以写的，但是要写大量的css样式，最后决定用elment 的table表格来写这样样式具体代码如下

            <el-table
              :data="acDistributionOperationParameters"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              :header-cell-class-name="cellClass"
              class="customer-table"
            >
              <el-table-column type="selection" width="100"></el-table-column>
              <el-table-column width="150">
                <template slot-scope="scope">{{scope.row.name_zh}}</template>
              </el-table-column>
              <el-table-column width="200">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.value" @change="handleChange" label="描述文字"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">{{scope.row.range}}{{scope.row.unit}}</template>
              </el-table-column>
            </el-table>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

这里最主要是修改了多选中的全选按钮，取消全选，之后将全选按钮改成文字，代码如下，给table加一个class之后在修改css样式 js代码

      if (row.columnIndex === 0) {
        return "disabledCheck";
      }
    },

css代码

  display: none !important;
}

::v-deep .el-table .disabledCheck .cell::before {
  content:"基本参数";
  text-align: center;
  line-height: 23px;
}

现在样式就完成。