修改Element的el-table-column内容样式

直接使用label-class-name="cell_other"给标签添加css无效,需要添加:deep属性增加深度修改才可以修改

在项目中 需求是更改样式排序问题,下图是修改好的样式

<el-table-column
        align="center"
        label="股息率"
        label-class-name="cell_other"-----------------------------------------
        min-width="140"
        prop="security__dividend_rate"
        sortable
      >
        <template #header>
          <span>股息率</span>
          <span class="questionIcon">
            <vab-icon
              class="questionIcon"---------------------------------------------
              icon="question-line"
              @click.stop="handleClick('dividend')"
            />
          </span>
        </template>
        <template #default="{ row }">
          <div class="isDividend">
            <!-- <el-tag v-if="row.by_people" class="byPeople" plain type="danger">
              优质
            </el-tag>
            <el-tag
              v-else-if="row.is_dividend == true"
              class="isDividendTrue"
              plain
            >
              稳定
            </el-tag>
            <el-tag v-else class="isDividendFalse" plain type="warning">
              不稳定
            </el-tag> -->
            <el-button text type="primary" @click="handleCSDividend(row)">
              <!-- 点击跳转分红 -->
              {{ row.security__dividend_rate ?? 0 }}%
            </el-button>
          </div>
        </template>
      </el-table-column>

在CSS中需要添加deep修改

.questionIcon {
    order: 2;----------------------------修改排序
  }
  :deep() {------------------------------------添加:deep
    .cell_other {
      .cell {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

deep样式穿透

关于整个列表Loading和局部loading

如果给table添加：v-loading="abcde",那么 在el-table-column的局部表格内使用：loading="abcde" 触发的是整个列表的loading，

如果想给对应的某行的某个表格内添加局部loading效果，那么需要给对应表格添加v-loading而不是:loading，然后在对应点击事件中使对应loading=true/false即可

需要注意的是，不能将el-table的v-loading删除，这样会影响重置或者搜索这些需要用到整个列表loading的效果，

例如

const positionInquiryListLoading = ref<boolean>(true);
const deleListLoading = ref<boolean>(true);

就是定义loading

当然 如果想修改loading的样式，可以直接使用deep：穿透修改

  :deep(){//loading样式
    .cell .el-loading-mask .el-loading-spinner .circular {
    margin-top: 12px;
    height: 20px;
    margin-left: -20px;
    width: 20px;
    }
  }