vue+elmentuiplus中Table-column 动态添加calss

1、需要属性:class-name=''

<el-col :span="24">
	<el-form-item>
		<el-table :data="zoneData" style="width: 100%">
			<el-table-column clas-name="{'highligtColor':talentId===''}" prop="talentName" label="所属作者" align="center">
			</el-table-column>
			<el-table-column prop="enterpriseName" label="所属单位" show-overflow-tooltip="true" align="center">
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="{ row, $index }">
					<el-link @click="removeData($index)">删除</el-link>
				</template>
			</el-table-column>
		</el-table>
	</el-form-item>

</el-col>

style 样式

注意：我这里要加::v-deep

::v-deep(.highligtColor){

  color:red;

}

在Vue中，::v-deep是一个用于穿透作用域样式的特殊选择器。

当在一个带有scoped属性的<style>标签中使用::v-deep选择器时，表示允许访问子组件中的样式，即使这些样式被封装在了子组件的作用域中。

在Vue 2.x 中，当使用scoped属性来限定样式作用域时，子组件的样式默认是无法被修改的。如果需要修改子组件中的样式，可以使用::v-deep选择器。

在Vue 3.x 中，::v-deep选择器已经被废弃，取而代之的是>>>选择器，用法类似。

结论：::v-deep选择器或>>>选择器用于在Vue组件中穿透样式作用域，能够修改子组件中被scoped属性封装的样式。

2、但是还是无法动态改变clas，

由于在 Vue.js 和 Element Plus（或 Element UI）中，<el-table-column> 组件并不直接支持一个名为 :class-name 的属性。<el-table-column> 用于定义表格的列，并且它本身并不渲染为一个 DOM 元素，因此你不能直接在其上应用 CSS 类。

但是可以这样解决：

<el-table-column prop="enterpriseName" label="所属单位" show-overflow-tooltip="true" align="center">
	<template #default="{ row, $index }">
		<span :class="{'highligtColor':row.enterpriseId===''}">{{ row.enterpriseName }}</span>
	</template>
</el-table-column>

完整代码：

<el-col :span="24">

                  <el-form-item>

                    <el-table :data="zoneData" style="width: 100%"  >

                    <el-table-column prop="talentName" label="所属作者" align="center" >

                      <template #default="{ row, $index }"><span :class="{'highligtColor':row.talentId===''}">{{ row.talentName }}</span></template>

                    </el-table-column>

                    <el-table-column prop="enterpriseName" label="所属单位" show-overflow-tooltip="true" align="center">

                      <template #default="{ row, $index }"><span :class="{'highligtColor':row.enterpriseId===''}">{{ row.enterpriseName }}</span></template>

                    </el-table-column>

                    <el-table-column label="操作" align="center">

                      <template #default="{ row, $index }">

                        <el-link @click="removeData($index)">删除</el-link>

                      </template>

                    </el-table-column>

                  </el-table>

                  </el-form-item>

                 

                  <!-- <pagination v-show="authorSel_total > 0" :total="authorSel_total" v-model:page="authorSel_params.pageIndex"

                        v-model:limit="authorSel_params.pageSize" @pagination="authorList"  /> -->

                </el-col>