elementUI-table

el-table定制展示内容

by Vikash Kumar Gupta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.4.3/index.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/1.4.3/theme-default/index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-default/index.css" rel="stylesheet">

<body>
  <div id="app">
  <template>
  
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="score" label="分数">
        <template  slot-scope="scope">
          <span :style="{color: getColor(scope.row.score)}">{{scope.row.score}}</span>
        </template>
      </el-table-column>
       <el-table-column label="A" prop="a">
        <template  slot-scope="scope">
          <comp :scope="scope.row.obj"></comp>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="inc">Increment</el-button>
  </template>
  </div>
</body>

JavaScript

Vue.component('comp', {
  data: function () {
    return {
      count: 0
    }
  },
  props: {
  	scope: {type: Object, default: () => {}}
  },
  template: '<span>{{scope.a}}</span>'
});

const app = new Vue({
  el: '#app',
  data() {
    return {
    	increment: 0,
      tableData: [{
        name: '小明',
        score: 88,
        obj: {
        	a: 0
        }
      }, {
        name: '小刚',
        score: 99,
        obj: {
        	a: 0
        }
      }, {
        name: '小花',
        score: 59,
        obj: {
        	a: 0
        }
      }]
    }
  },
  methods: {
  	getColor(score) {
    	if(score < 60) return 'red';
      if(score >= 90) return 'green';
      return 'black'
    },
    inc(){
    	const obj = {
        name: '小花',
        score: 59,
        obj: {
        	a: 0
        }
      }
      this.tableData[2] = obj
			this.tableData[2].obj.a++
    }
  }
})