Vue项目中el-table每列插入不同类型的svg图形

Vue项目中el-table每列插入不同类型的svg图形

在每一个el-table-column中，插入写好的Svg的组件，如：

 <el-table
    :data="RelatedData"
  >
 <el-table-column
      label="表头1"
      prop="column1"
    >
      <template slot-scope="scope">
        <Compent1:data1="scope.row.data1"></Compent1>
      </template>
    </el-table-column>
    </el-table>

其中，RelatedData是该表格的数据，如果是不同源的话，需要提前先处理好，放到一个数组中，prop=“column1”表示该数据的一项，即表头。Compent1是写好的组件，data1是要传的数据，必须与该组件中的数据名称保持一致。
在第一版中，共有8组数据，理想情况是一行一个图，但是运行后发现8个图在一行，后来经过分析，发现错误之处，错误代码如下：

this.svg = d3
        .select("#MySvg")
        .append("svg")
        .attr("width", width)
        .attr("height", height)

我选择了#MySvg，并在里面加了新的svg图形，此处需要说明一下d3.append()的用法，在对页面上已存在的html元素，append会在已存在的元素中添加新的子节点，而对于页面中不存在的元素，它们则是直接添加新增的元素。
当第一个节点插入后，之后的插入svg操作都是在该svg后面，而不是我所设想的，每次调用Compent1组件，svg清空，重新append()一个新的svg在新的一行。
更改后的代码为：

this.svg = d3
        .select(this.$el)
        .append("svg")
        .attr("width", width)
        .attr("height", height)

$el指向当前组件的DOM元素。