elementUI组件table渲染标签以及样式修改

        **问题： **项目中有一个需求，要求在表格中渲染html元素，但是直接将标签数据传如table后，发现并没有按照标签渲染，而是渲染成了文本。

        原因： 在 element-ui 中，table组件默认只渲染文本格式的内容

        **解决：**需要使用v-html指令来渲染html标签

<el-table-column prop="img" label="图片">
     <slot slot-scope="data">
          <div v-html="data.row.img"></div>
     </slot>
</el-table-column>

        在不影响全局样式条件下使用css穿透修改v-html样式：

.table-v-html {
    /deep/ .voltage-img{
        display: inline-block;
        width: 27px;
        height: 17px;
    }
}

完整代码如下：

<template>
  <div class="table-v-html">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="img" label="图片">
            <slot slot-scope="data">
              <div v-html="data.row.img"></div>
            </slot>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import rssi0 from '../assets/imgs/rssi0.png';
import rssi1 from '../assets/imgs/rssi1.png';
import rssi2 from '../assets/imgs/rssi2.png';
export default {
  name: "tableVhtml",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: '上海市普陀区金沙江路 1518 弄',
          img: `<img class='voltage-img' src=' ${rssi0} ' alt=''>`
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: '上海市普陀区金沙江路 1518 弄' ,
          img:`<img class='voltage-img' src=' ${rssi1} ' alt=''>`
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: '上海市普陀区金沙江路 1518 弄' , 
          img:`<img class='voltage-img' src=' ${rssi2} ' alt=''>`
        },
      ]
    };
  }, 
 methods:{}
};
</script>
<style lang="less" scoped>
.table-v-html {
    /deep/ .voltage-img{
        display: inline-block;
        width: 27px;
        height: 17px;
    }
}
</style>