vue——table

知识点

1. 显示table数据id列，直接是type=“index”

<el-table-column type="index" width="50"></el-table-column>

2. 过滤器

<el-table-column label="价格">
		<template slot-scope="scope">
	    	 <span>{{scope.row.price | showPrice}}</span>
	   </template>
 </el-table-column>
 filters:{
    showPrice(price){
      return "￥"+price.toFixed(2)
    }
  }

3. 列加图标

<el-table-column label="购买数量">
   <template slot-scope="scope">
     <i class="el-icon-minus" @click="decrement(scope.$index)" :disabled="scope.row.num<=1"></i>
     <span style="margin: 0 10px">{{ scope.row.num }}</span>
     <i class="el-icon-plus" @click="increment(scope.$index)"></i>
   </template>
 </el-table-column>
 decrement(index){
  if(this.tableData[index].num>1){
     this.tableData[index].num--
   }
 },
 increment(index){
   this.tableData[index].num++
 }

4. slot-scope中取index

scope.$index
<i class="el-icon-minus" @click="decrement(scope.$index)" :disabled="scope.row.num<=1"></i>

5. disabled绑定

:disabled="scope.row.num<=1"（里面是true或false）
<i class="el-icon-minus" @click="decrement(scope.$index)" :disabled="scope.row.num<=1"></i>

6. 计算总价(计算属性)

computed: {
//计算总价
    totalPrice() {
	let totalPrice = 0;
	
	//循环的第一种写法
	  /* this.tableData.forEach((el) => {
	    totalPrice += el.price * el.num;
	  }); */
	  
	//循环的第二种写法
	/* for (let item of this.tableData) {
	 	totalPrice += el.price * el.num;
	} */
	//循环的第三种写法(函数式编程)
	totalPrice = this.tableData.reduce( (p, arr) => {
	  return p + arr.price*arr.num;
	},0);
	return totalPrice;
},

template

<template>
  <div>
   <h1>table</h1>
    <div v-if="tableData.length">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="书籍名称"></el-table-column>
        <el-table-column prop="date" label="出版日期"></el-table-column>
        <el-table-column label="价格">
          <template slot-scope="scope">
            <span>{{scope.row.price | showPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买数量">
          <template slot-scope="scope">
            <i class="el-icon-minus" @click="decrement(scope.$index)" :disabled="scope.row.num<=1"></i>
            <span style="margin: 0 10px">{{ scope.row.num }}</span>
            <i class="el-icon-plus" @click="increment(scope.$index)"></i>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <h2>总价格：{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>
  </div>
</template>

js

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "算法导论",
          date: "2006-9",
          price: 85.0,
          num: 1,
        },
        {
          name: "算法导论1",
          date: "2006-10",
          price: 120.0,
          num: 1,
        },
        {
          name: "算法导论2",
          date: "2020-5",
          price: 45.0,
          num: 1,
        },
        {
          name: "算法导论3",
          date: "2016-9",
          price: 30.0,
          num: 1,
        },
      ],
    };
  },
  methods: {
    decrement(index){
      if(this.tableData[index].num>1){
        this.tableData[index].num--
      }
    },
    increment(index){
      this.tableData[index].num++
    }
  },
  filters:{
    showPrice(price){
      return "￥"+price.toFixed(2)
    }
  },
  computed: {
    //计算总价
    totalPrice() {
      let totalPrice = 0;
      //循环的第一种写法
      /* this.tableData.forEach((el) => {
        totalPrice += el.price * el.num;
      }); */
      //循环的第二种写法
      /* for (let item of this.tableData) {
        totalPrice += el.price * el.num;
      } */
      //循环的第三种写法
      //数组高阶函数
      //编程范式：命令式编程（按步骤来）
      //声明式编程（从数据进入，数据再利用）

      //编程范式：面向对象编程（第一公民：对象）
      // 函数式编程（第一公民：函数）
      //filter/map/reduce
      // 案例
      /* let tAtt = [10,20,102,105];
      //选出小于100的元素
      let re = tAtt.filter(item=>item<100).map(item=>item*2).reduce((p,c)=>p+c)
      console.log(re); */
      // 都乘以2
      // 相加
      totalPrice = this.tableData.reduce( (p, arr) => {
        return p + arr.price*arr.num;
      },0);
      return totalPrice;
    },
  },
};
</script>