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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010295735/article/details/82381140

自定义了一个条形展示百分比的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) {
        style["height"] = this.height + "px";
      } else {
        style.height = "20px";
      }
      return style;
    },
    styles2() {
      let style = {};

      style.height = "100%";
      if (this.scale) {
        style["width"] = this.scale * 100 + "%";
      } else {
        style.width = "0%";
      }
      if (this.color) {
        style["background-color"] = this.color;
      } else {
        style["background-color"] = "#36a9ce";
      }
      return style;
    }
  }
};
</script>

在页面中调用时，代码如下：

<template>
  <div id="J_PurchaseWrap">
	<scalebar id="scalebar1" scale=0.2></scalebar>
	<Table border :columns="columns" :data="data"></Table>
  </div>
</template>
<script>
import scalebar from "./scalebar.vue";
export default {
  components: {
    scalebar
  },
  data() {
    return {
      columns: [
        {
          title: "数量",
          key: "num"
        },
        {
          title: "百分比",
          key: "numof100",
          render: (h, params) => {
            return h("div",{
              style: {
                display: "inline-block"
              }
            },[
               h("div",{
                  style: {
                    float: "left",
                    marginRight: "5px"
                  }
               },params.row.numof100 * 100 + "%"),
               h("scalebar", {
                  props: {
                    longof100: 100,
                    height: 15,
                    scale: params.row.numof100,
                    color: "#34bae7" //可自定义条形的颜色
                  },
                  style: {
                    float: "left"
                  }
               })
            ]);
          }
        }
      ],
      data: [
        {
          num: 10,
          numof100: 0.85
        },
        {
          num: 10,
          numof100: 0.6
        }
      ]
    };
  }
};
</script>

其中scalebar1可以显示，而table中的却显示不了。查了资料发现，原来自定义的组件在table中渲染时不需要加引号。改成如下：

就可以正常显示啦：