<template>
查看編輯
? <el-table
? ? :data="tableData"
? ? border
? ? style="width: 100%">
? ? <el-table-column
? ? ? fixed
? ? ? prop="date"
? ? ? label="日期"
? ? ? width="150">
? ? </el-table-column>
? ? <el-table-column
? ? ? prop="name"
? ? ? label="姓名"
? ? ? width="120">
? ? </el-table-column>
? ? <el-table-column
? ? ? prop="province"
? ? ? label="省份"
? ? ? width="120">
? ? </el-table-column>
? ? <el-table-column
? ? ? prop="city"
? ? ? label="市區(qū)"
? ? ? width="120">
? ? </el-table-column>
? ? <el-table-column
? ? ? prop="address"
? ? ? label="地址"
? ? ? width="300">
? ? </el-table-column>
? ? <el-table-column
? ? ? prop="zip"
? ? ? label="郵編"
? ? ? width="120">
? ? </el-table-column>
? ? <el-table-column
? ? ? fixed="right"
? ? ? label="操作"
? ? ? width="100">
? ? ? <template slot-scope="scope">
? ? ? ? <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
? ? ? ? <el-button type="text" size="small">編輯</el-button>
? ? ? </template>
? ? </el-table-column>
? </el-table>
</template>
<script>
? export default {
? ? methods: {
? ? ? handleClick(row) {
? ? ? ? console.log(row);
? ? ? }
? ? },
? ? data() {
? ? ? return {
? ? ? ? tableData: [{
? ? ? ? ? date: '2016-05-02',
? ? ? ? ? name: '王小虎',
? ? ? ? ? province: '上海',
? ? ? ? ? city: '普陀區(qū)',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄',
? ? ? ? ? zip: 200333
? ? ? ? }, {
? ? ? ? ? date: '2016-05-04',
? ? ? ? ? name: '王小虎',
? ? ? ? ? province: '上海',
? ? ? ? ? city: '普陀區(qū)',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1517 弄',
? ? ? ? ? zip: 200333
? ? ? ? }, {
? ? ? ? ? date: '2016-05-01',
? ? ? ? ? name: '王小虎',
? ? ? ? ? province: '上海',
? ? ? ? ? city: '普陀區(qū)',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1519 弄',
? ? ? ? ? zip: 200333
? ? ? ? }, {
? ? ? ? ? date: '2016-05-03',
? ? ? ? ? name: '王小虎',
? ? ? ? ? province: '上海',
? ? ? ? ? city: '普陀區(qū)',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1516 弄',
? ? ? ? ? zip: 200333
? ? ? ? }]
? ? ? }
? ? }
? }
</script>
模態(tài)框組件：
<el-table :data="tableData" @selection-change="handleSelectionChange"
? ? ref="multipleTable">
? ? ? <el-table-column
? ? ? ? type="selection"
? ? ? ? width="55">
? ? ? </el-table-column>
? ? ? <el-table-column prop="add_time" label="添加日期" width="150">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <span>{{ scope.row.add_time | timeFilter }}</span>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column prop="goods_name" label="商品名稱" width="300">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <div v-if="scope.row.goods_id == inputHandle.goods_id">
? ? ? ? ? ? <span v-if="editFlag">{{ scope.row.goods_name }}</span>
? ? ? ? ? ? <el-input v-model="scope.row.goods_name" v-else></el-input>
? ? ? ? ? </div>
? ? ? ? ? <div v-else>{{ scope.row.goods_name }}</div>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column prop="goods_number" label="商品數(shù)量" width="120">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <div v-if="scope.row.goods_id == inputHandle.goods_id">
? ? ? ? ? ? <span v-if="editFlag">{{ scope.row.goods_number }}</span>
? ? ? ? ? ? <el-input v-model="scope.row.goods_number" v-else></el-input>
? ? ? ? ? </div>
? ? ? ? ? <div v-else>{{ scope.row.goods_number }}</div>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column prop="goods_price" label="商品價(jià)格" width="120">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <!-- 當(dāng)選擇的id和表格的當(dāng)前行的id匹配則顯示input -->
? ? ? ? ? <div v-if="scope.row.goods_id == inputHandle.goods_id">
? ? ? ? ? ? <span v-if="editFlag">{{ scope.row.goods_price }}</span>
? ? ? ? ? ? <el-input v-model="scope.row.goods_price" v-else></el-input>
? ? ? ? ? </div>
? ? ? ? ? <div v-else>{{ scope.row.goods_price }}</div>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column prop="goods_weight" label="商品重量" width="120">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <div v-if="scope.row.goods_id == inputHandle.goods_id">
? ? ? ? ? ? <span v-if="editFlag">{{ scope.row.goods_weight }}</span>
? ? ? ? ? ? <el-input v-model="scope.row.goods_weight" v-else></el-input>
? ? ? ? ? </div>
? ? ? ? ? <div v-else>{{ scope.row.goods_weight }}</div>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column prop="goods_state" label="商品狀態(tài)" width="120">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <span v-if="scope.row.goods_state == '0'">未通過(guò)</span>
? ? ? ? ? <span v-else-if="scope.row.goods_state == '1'">審核中</span>
? ? ? ? ? <span v-else-if="scope.row.goods_state == '2'">已審核</span>
? ? ? ? ? <span v-else>未知狀態(tài)</span>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column fixed="right" label="操作" width="120">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-button
? ? ? ? ? ? type="danger"
? ? ? ? ? ? icon="el-icon-delete"
? ? ? ? ? ? size="small"
? ? ? ? ? ? circle
? ? ? ? ? ? @click="del(scope.row)"
? ? ? ? ? ></el-button>
? ? ? ? ? <template v-if="scope.row.goods_id == inputHandle.goods_id">
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? icon="el-icon-edit"
? ? ? ? ? ? ? circle
? ? ? ? ? ? ? v-if="editFlag"
? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? @click="edit(scope.row)"
? ? ? ? ? ? ></el-button>
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? type="success"
? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? icon="el-icon-check"
? ? ? ? ? ? ? circle
? ? ? ? ? ? ? v-else
? ? ? ? ? ? ? @click="save(scope.row)"
? ? ? ? ? ? ></el-button>
? ? ? ? ? </template>
? ? ? ? ? <template v-else>
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? icon="el-icon-edit"
? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? circle
? ? ? ? ? ? ? @click="edit(scope.row)"
? ? ? ? ? ? ></el-button>
? ? ? ? ? </template>
? ? ? ? </template>
? ? ? </el-table-column>
? ? </el-table>
分頁(yè)組件
<el-pagination
? ? ? style="margin-top:10px;"
? ? ? @size-change="handleSizeChange"
? ? ? @current-change="handleCurrentChange"
? ? ? :current-page="currentPage"
? ? ? :page-sizes="[5, 10, 15, 20]"
? ? ? :page-size="pagesize"
? ? ? layout="total, sizes, prev, pager, next, jumper"
? ? ? :total="total">
? ? </el-pagination>
