iview的table组件中渲染自定义vue组件

自定义了一个条形展示百分比的vue组件scalebar。代码如下：

<style>
.intoDiv {
  border-radius: 2px;
  box-shadow: 1px 1px 3px #c5c5c5;
}
</style>

<template>
    <div id="J_PurchaseWrap">
		<div :style="styles1">
			<div class="intoDiv" :style="styles2"></div>
		</div>
	</div> 
</template>

<script>
/****
 * 条形展示百分比
 * longof100: 为100%时，条形的长度
 * height: 条形的高度
 * scale: 展示的百分比，写成小数
 * color: 条形的颜色
 *
 */
export default {
  name: "scalebar",
  props: {
    longof100: [Number, String],
    height: [Number, String],
    scale: [Number, String],
    color: String
  },
  computed: {
    styles1() {
      let style = {};
      if (this.longof100) {
        style["width"] = this.longof100 + "px";
      } else {
        style.width = "100px";
      }
      if (this.height) {
        styl