.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>