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

本文主要是介绍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) {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中渲染时不需要加引号。改成如下：