zoukankan      html  css  js  c++  java
  • 使用标签页和el-table实现数据的渲染

    详细API可参考官网:
    https://element.eleme.cn/2.0/#/zh-CN/component/pagination
    根据el-table中的 data绑定一个数组,brandlist就是数组名,值为prop的值

     <el-table
            border
            :data="brandlist"
            highlight-current-row
      >
      // 表格的列 el-table-column,
        <el-table-column align="center" label="ID" prop="id" width="80"/>
        <el-table-column align="center" label="编号" prop="brandSn" width="120"/>
        <el-table-column align="center" label="名称" prop="name" width="180"/>
        <el-table-column align="center" label="图片" property="picUrl">
            <template slot-scope="scope">
                <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="80">
            </template>
        </el-table-column>
        <el-table-column align="center" label="介绍" width="300" prop="desc"/>
        <el-table-column align="center" label="等级" prop="level"/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    

    js代码

    通过pagination组件进行绑定,我使用的标签页是公用组件,添加一个自定义的事件,事件中用于请求数据

    export default {
        name: 'Brand',
        components:{
            Pagination
        },
        data() {
            return {
                brandlist:[],
                total: 0,
                listQuery: {
                    page: 1,
                    limit: 20,
                    id: undefined,
                    name: undefined,
                    sort: 'add_time',
                    order: 'desc'
                }
            }
        },
        mounted() {
            this.getList()        
        },
        methods: {
            getList() {
                listBrand(this.listQuery)
                .then(response => {
                    this.brandlist = response.data.data.list
                    this.total = response.data.data.total
                    })
                .catch(() => {
                    this.brandlist = []
                    this.total = 0
                })
                console.log(this.brandlist)
            }        
        },
    }
    
    
  • 相关阅读:
    oracle用户被锁死
    windows远程桌面智能调整大小
    批量ping测试脚本
    信息的组织和提取方法
    BeautifulSoup
    requests模块学习
    Telerik Fiddler 应用方法
    js 时间格式换成 把字符串(yyyymmdd)转换成日期格式(yyyy-mm-dd)记录
    vuedraggable 拖拽 应用 不同列表之间的拖拽
    vue项目图片上传 vant van-uploader 图片上传
  • 原文地址:https://www.cnblogs.com/luoqiaoting/p/11694130.html
Copyright © 2011-2022 走看看