第十六课 编写信息列表table部分

一、编写src/view/book/bookinfo.vue，的table部分

 <div class="bookinfo" style="width:100%;" max-height="380">
        <el-table :data="bookinfolist">
            <el-table-column fixed label="序号" type="index"></el-table-column>
            <el-table-column label="书号" prop="bookISBN"></el-table-column>
            <el-table-column label="书名" prop="bookName"></el-table-column>
            <el-table-column label="作者" prop="autor"></el-table-column>
            <el-table-column label="出版社" prop="press"></el-table-column>
            <el-table-column label="出版日期" prop="publicationdate"></el-table-column>
            <el-table-column label="价格" prop="price"></el-table-column>
            <el-table-column label="数量" prop="quantity"></el-table-column>
            <el-table-column label="图书类型" prop="bookType">
                <template slot-scope="scope">
                    <span>{{scope.row.bookType | bookTypeFilter}}</span>
                </template>
            </el-table-column>
             <el-table-column label="操作" width="150" fixed="right">
                 <template slot-scope="scope">
                     <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
                     <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                 </template>
             </el-table-column>
        </el-table>
    </div>

二、编写table字段中图书类型的过滤器

不要写在data中，因为过滤器中获取不到this，需要把bookTypeOptions放在页面中的最上方
const bookTypeOptions = [
    {type:'1',name:"1类"},
    {type:'2',name:"2类"},
    {type:'3',name:"3类"},
    {type:'4',name:"4类"}
]

 filters:{
        bookTypeFilter(type){
            const bookTypeobj = bookTypeOptions.find(obj=>obj.type===type)
            return bookTypeobj?bookTypeobj.name:null
        }
    },