Vue学习笔记

2019独角兽企业重金招聘Python工程师标准>>>

<template>
    <div>
        <StockSearchComponent v-on:selected="select"></StockSearchComponent>
        <table class="am-table am-table-bordered am-table-hover">
            <thead>
                <tr>                    
                    <td>#</td>
                    <td>分类</td>
                    <td>名称</td>
                    <td>规格</td>
                    <td>单位</td>
                    <td>库存</td>
                    <td>数量</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,k) in Selected" v-bind:key="v.index">
                    <td>{{k+1}}</td>
                    <td>{{v.ClassTitle}}</td>
                    <td>{{v.GoodsTitle}}</td>
                    <td>{{v.Standard}}</td>
                    <td>{{v.Unit}}</td>
                    <td>{{v.Amount}}</td>
                    <td>

                    </td>
                    <td>
                        <button class="am-btn am-btn-xs am-btn-danger" @click="unselect(v)">删除</button>
                    </td>                    
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import {Getter,Action} from 'vuex-class'
import StockSearchComponent from './StockSearch.vue'
import {Stock} from '../store/modules/Stock'
import * as _ from 'lodash'
@Component({
    components:{
        StockSearchComponent
    }
})
export default class NormalOrder extends Vue{
    Selected:Stock[]=[];
    select(stock:Stock){
        if(!_.find(this.Selected,stock))
            this.Selected.push(stock)
    }
    unselect(stock:Stock){
        let index:number = _.findIndex(this.Selected,stock)
        if(index>-1){
            this.Selected.splice(index,1)
        }
    }
}
</script>

转载于:https://my.oschina.net/yanpengquan/blog/1622295