境界線を削除する理由は、境界線の境界線がページの背景色と同じであり、表が 1 ピクセル後退しているように見えるためです。
実現する必要があるのは, テーブルからボーダーボーダーを削除すると同時に垂直ボーダーを追加することです.
しかし, boder 属性が追加されていない場合, テーブルには垂直ボーダー
がありません. この種のボトムには凹みはありませんが,
達成したい最終的な効果は
最初に考えた
最初のアイデアは、テーブルの境界線を見つけて、スタイルの浸透によって境界線の色を変更することです. このアイデアには2つの障害があります. 1つ目は、境界線が白に設定されている場合、テーブルの水平線が境界 Shen には拡張されません。2つ目は、表の左側の境界疑似クラスのみが見つかり、右側の疑似クラスが見つからないことです。
最初あると思った.el-table__border-right-patchけど無かった
したがって、スタイルの浸透によって左側のみを変更でき、display:none左側の境界線を非表示にすることができます
第二の考え方
2 つ目の考え方は、テーブルのコールバック メソッドを使用して、テーブル ヘッダーとフォームのグリッド セルに右罫線を追加すると同時に、最後の列の右罫線をキャンセルすることです
。ヘッダー コールバック:フォーム コールバック:コールバック メソッドの追加コールバック関数コード:
const headerCellStyle = ({
columnIndex}) => {
//这里的2是代表最后一列
if (columnIndex !== 2) {
return {
borderRight: "1px #eee solid",
}
}
}
const cellStyle = ({
columnIndex}) => {
if (columnIndex !== 2) {
return {
borderRight: "1px #eee solid"
}
}
}
達成効果：左右に縁取りがなく、凹みが出ず、内側に縦線が入っている
