table表格中的进度条

<template>

  <div class="header">

    <el-table

      :data="tabelData"

      :header-cell-style="rowClass"

      :cell-style="cellStyle"

    >

      <el-table-column

        prop="name"

        label="名称"

        align="center"

        width="80"

      ></el-table-column>

      <el-table-column prop="num" label="特征重要性" align="center" sortable="">

        <template slot-scope="scope">

          <el-progress

            type="line"

            :percentage="scope.row.num * 100"

            :format="format(scope.row, scope.column)"

            color="#3c79f2"

            :text-inside="false"

            :stroke-width="12"

          />

        </template>

      </el-table-column>

    </el-table>

 

</template>

 

<script>

export default {

  name: "bostTable",

  props: {

    data: {

      type: Object,

    },

  },

  data() {

    return {

      tabelData: [

        {

          date: "featture1",

          num: 1,

        },

        {

          date: "featture2",

          num: 0.7,

        },

        {

          date: "featture3",

          num: 0.5,

        },

        {

          date: "featture4",

          num: 0.8,

        },

      ],

    };

  },

  components: {

    Search,

  },

  created() {

  },

  mounted() {},

  methods: {

    rowClass({ row, rowIndex }) {

      return "background:#3c79f2; color:#fff";

    },

    format(row, column) {

      return () => {

        if (column.label === "特征重要性") {

          return row.num + "";

        }

      };

    },

    //设置指定行、列、具体单元格颜色

    cellStyle({ row, column, rowIndex, columnIndex }) {

      // console.log(rowIndex, columnIndex);

      // if (columnIndex === 0) {

      //   //指定坐标rowIndex ：行，columnIndex ：列

      //   return "background:red"; //rgb(105,0,7)

      // } else {

      //   return "";

      // }

    },

  },

};

</script>

 

<style lang='scss' scoped>

.main-content-box {

  border: solid 1px #000;

}

#svg-canvas {

  padding-top: 20px;

}

</style>