vue2入门教程

<template>

    <div>

        <el-descriptions title="用户信息" :column="2">

            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>

            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>

            <el-descriptions-item label="居住地">苏州市</el-descriptions-item>

            <el-descriptions-item label="备注">

                <el-tag size="small">学校</el-tag>

            </el-descriptions-item>

            <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>

        </el-descriptions>

        <el-form ref="form" :model="form" label-width="200px" :inline="true" :rules="rules">

            <el-form-item label="值" prop="value">

                <el-select v-model="form.value" filterable placeholder="请选择">

                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

                    </el-option>

                </el-select>

            </el-form-item>

            <el-form-item label="姓名" prop="name">

                <el-input v-model="form.name" placeholder="搜索名称">

                    <el-button slot="append" @click="dialogTableVisible = true" icon="el-icon-search"></el-button>

                </el-input>

            </el-form-item>

            <el-form-item label="地址" prop="searchAddr">

                <el-input v-model="form.searchAddr" placeholder="搜索地址"></el-input>

            </el-form-item>

            <el-form-item>

                <el-button type="success" @click="onSubmit">查询</el-button>

            </el-form-item>

        </el-form>

        <el-table :data="tableData" style="width: 100%" :border="true" :stripe="true">

            <el-table-column prop="date" label="日期" width="180">

            </el-table-column>

            <el-table-column prop="name" label="姓名" width="180">

            </el-table-column>

            <el-table-column prop="sexStr" label="性别" width="180">

            </el-table-column>

            <el-table-column prop="address" label="地址">

            </el-table-column>

            <el-table-column prop="mark" label="备注">

                <template slot-scope="{row}">

                    <el-input v-model="row.mark" placeholder="备注"></el-input>

                </template>

            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">

                <template slot-scope="{row}">

                    <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->

                    <el-button type="text" size="small" @click="handleSave(row)">保存</el-button>

                    <el-button type="text" size="small" @click="handleView(row)">详情</el-button>

                </template>

            </el-table-column>

        </el-table>

        <el-pagination background :current-page="PageNum" :page-size="pageSize" layout="sizes,prev, pager, next"

            :total="total" @size-change="handleSizeChange" @current-change="handePageChange">

        </el-pagination>

        <!-- <iframe src="https://www.baidu.com/">

        </iframe> -->

        <!-- <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> -->

        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">

            <el-table :data="tableData" @row-dblclick="handleDialogDBClick" highlight-current-row

                @current-change="handleCurrentChange">

                <el-table-column property="date" label="日期" width="150"></el-table-column>

                <el-table-column property="name" label="姓名" width="200"></el-table-column>

                <el-table-column property="address" label="地址"></el-table-column>

                <el-table-column>1234</el-table-column>

            </el-table>

            <span slot="footer" class="dialog-footer">

                <el-button @click="dialogTableVisible = false">取 消</el-button>

                <el-button type="primary" @click="handleDialogOK">确 定</el-button>

            </span>

        </el-dialog>

    </div>

</template>

<script>

// import {getListInfo} from '...'

export default {

    name: 'ItmanTable1',

    data() {

        return {

            tableData: [],

            form: {

                value: '',

                name: '',

                searchAddr: ''

            },

            rules: {

                name: [{

                    required: true, message: '请输入姓名', trigger: ['blur', 'change']

                }]

            },

            PageNum: 1,

            pageSize: 10,

            total: 20,

            dialogTableVisible: false,

            currentRow: {},

            options: [{

                value: '选项1',

                label: '黄金糕'

            }, {

                value: '选项2',

                label: '双皮奶'

            }, {

                value: '选项3',

                label: '蚵仔煎'

            }, {

                value: '选项4',

                label: '龙须面'

            }, {

                value: '选项5',

                label: '北京烤鸭'

            }]

        };

    },

    mounted() {

        this.getList()

    },

    methods: {

        onSubmit() {

            this.$refs['form'].validate((valid) => {

                if (valid) {

                    this.getList()

                } else {

                    console.log('error submit!!');

                    return false;

                }

            });

        },

        handleDialogDBClick(row, column, event) {

            // console.log(row)

            // console.log(column)

            this.form.name = row.name

            this.dialogTableVisible = false

        },

        handleCurrentChange(val) {

            console.log(val)

            this.currentRow = val;

        },

        handleDialogOK() {

            this.form.name = this.currentRow.name

            this.dialogTableVisible = false

        },

        handleSizeChange(val) {

            this.pageSize = val

            this.PageNum = 1

            this.getList()

        },

        handePageChange(val) {

            this.PageNum = val

            this.getList()

        },

        handleSave(item) {

            console.log(item)

        },

        handleView(row) {

            this.$router.push({

                name: 'Table2',

                params: { id: row.id }

            })

        },

        getList() {

            //调接口，返回列表结果

            // getListInfo(this.form).then(res=> {

            // this.tableData = res.data

            // this.total = res.data.total

            // })

            console.log(this.PageNum)

            console.log(this.pageSize)

            let list = [{

                id: 1,

                date: '2016-05-02',

                name: '王小虎1',

                sex: 1,

                address: '上海市普陀区金沙江路 1518 弄'

            }, {

                id: 2,

                date: '2016-05-04',

                name: '王小虎2',

                sex: 1,

                address: '上海市普陀区金沙江路 1517 弄'

            }, {

                id: 3,

                date: '2016-05-01',

                name: '王小虎3',

                sex: 1,

                address: '上海市普陀区金沙江路 1519 弄'

            }, {

                id: 4,

                date: '2016-05-03',

                name: '王小虎4',

                sex: 1,

                address: '上海市普陀区金沙江路 1516 弄'

            }]

            list.forEach(item => {

                item.sexStr = item.sex == 1 ? '男' : '女'

                item.mark = '123'

            })

 

            this.tableData = list

        }

    },

};

</script>

<style scoped>

</style>