el-table修改边框颜色

  .table{
    border-left: 1px solid #b2cfe7;
    border-top: 1px solid #b2cfe7;
    border-bottom: 1px solid #b2cfe7;
  }
::v-deep .el-table th.el-table__cell.is-leaf {
        border-bottom: 1px solid #b2cfe7 !important;
        border-right: 1px solid #b2cfe7 !important;
  }

  ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border-bottom: 1px solid #b2cfe7 !important;
        border-right: 1px solid #b2cfe7 !important;
 }
<el-table tooltip-effect="light" :data="addFormData.productList" border
      class="table"
      style="width: 100%"
      :row-style="{ height: '15px' }"
      :header-cell-style="{ 
        background:'#e7f3fc'}">
            >
        <el-table-column label="序号"
          type="index"
          width="100"
          align="center"
          >
        </el-table-column>
        <el-table-column label="名称" prop="productuser"  align="center">
          <template slot-scope="scope">
            <!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.productuser'"
              :rules="addFormRules.productuser" class="all" style="width: 100%;height: 100%;"> -->
              <el-input   v-model="scope.row.productuser" placeholder="" clearable  class="Tinput"></el-input>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>
				<el-table-column label="规格型号" prop="productName"  align="center">
					<template slot-scope="scope">
						<!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'"
							:rules="addFormRules.productName" class="all"> -->
							<el-select v-model="scope.row.productName" filterable value-key="id" placeholder="请选择" 
								@change="pestChange($event, scope.$index)">
								<el-option v-for="item in optionsList" :key="item.id" :label="item.productName"
									:value="item">
								</el-option>
							</el-select>
						<!-- </el-form-item> -->
					</template>
				</el-table-column>
        <el-table-column label="数量" prop="quantity"   align="center">
          <template slot-scope="scope">
            <!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.quantity'"
              :rules="addFormRules.quantity" class="all"> -->
              <el-input  v-model="scope.row.quantity" placeholder="" clearable ></el-input>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>
        <el-table-column label="图片" prop="tup"   align="center">
           <el-image 
           style="width: 50px; height: 50px"
           src="https://img1.baidu.com/it/u=4020224904,1097640003&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" 
           :preview-src-list="srcList">
         </el-image>
             <!-- </div> -->
        </el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
					width="150">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"
							v-hasPermi="['system:order:edit']">上传图片</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope)"
							v-hasPermi="['system:order:remove']">删除整行</el-button>
					</template>
				</el-table-column>
			</el-table>

关键代码

添加类名,让整个table边框只展示某几个边样式

<el-table tooltip-effect="light" :data="addFormData.productList" border
      class="table"
      style="width: 100%"
      :row-style="{ height: '15px' }"
      :header-cell-style="{ 
        background:'#e7f3fc'}">
</el-table>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值