Vue el-table-column 动态使用style

这几天在做一个基于el-table-column的二次封装，主要是针对于el-table-column对于多布局的使用比较麻烦，途中需要用到外界传入style 样式，那么怎么动态的使用style 呢，下面直接上代码
这个是封装的表头文件，如果需要自定义s tyle 的话，需要在这个文件里面填写样式
 

	{
	prop: 'medium',
	label: '媒体',
    width: 180,
    type:adapter_column_type.INPUTER
	},
    
    {
	prop: 'image_list',
	label: '图片',
    width: 280,
    type:adapter_column_type.IMAGE,
    custom_style:{
    width:100+"px",
    height:100+"px"
    }

然后动态创建 表格

 

 <el-table :data="tableData" border style="width: 100%">
      <template v-for="column in my_columns">
        <adapterColumn
          :key="column.prop"
          :adapter_prop="column.prop"
          :adapter_label="column.label"
          :adapter_width="column.width"
          :adapter_type="column.type"
          :custom_style="column.custom_style"
        >
        </adapterColumn>
      </template>
    </el-table>

adapterColumn 是我基于 el-table-column 封装的一个组件
 

  <div v-if="adapter_type == POPOVER">
        <el-popover
          placement="right"
          :title="adapter_label"
          width="200"
          trigger="hover"
          :content="scope.row[adapter_prop]"
        >
          <span
            id="show_popover"
            class="show_content"
            :style="custom_style ? [custom_style] : [content_style]"
            slot="reference"
          >
            {{ scope.row[adapter_prop] }}
          </span>
        </el-popover>
      </div>

而上面代码的custom_style 为外部传入字段，有值的时候就显示外部style ,没有值的时候使用默认样式
 

custom_style: {

type: Object,

default: () => {}

},

 

computed: {

content_style() {

return "width:" + this.adapter_width + "px";

}

},