14-element简易版table增删查

Snipaste_2019-08-29_16-03-20.png

• vue

<template>
  <div class="table-box">
    <el-table ref="tableSelection" v-loading="loadingStatus" tooltip-effect="light" :data="tableData" stripe border @selection-change="handleSelectionChange">
      <div slot="empty">暂无数据noData................</div>
      <el-table-column
        type="selection"
      />
      <el-table-column type="index" />
      <el-table-column sortable prop="id" label="车位id" />
      <el-table-column
        prop="stop"
        label="停车地点"
        :filters="[{text: '停车区1',value: '停车区1' }, {text:'停车区2',value: '停车区2' },{text:'停车区3',value: '停车区3' }]"
        :filter-method="filterHandler"
      />
      <el-table-column prop="pay" label="支付方式" />
      <el-table-column prop="address" label="家庭住址" />
      <el-table-column prop="floor" label="楼层" />
      <el-table-column prop="datetime" label="停车时间" />
      <el-table-column prop="title" align="center" label="车牌号码" :show-overflow-tooltip="true" />
      <el-table-column label="停车照片" align="center">
        <template slot-scope="scope">
          <img class="table-img1" :src="scope.row.avator" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleLook(scope.row,scope.$index,scope.column)">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row,scope.$index,scope.column)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="查看表格" :visible.sync="dialogFormVisible" center>
      <el-form :model="form">
        <el-form-item label="车位id" :label-width="formLabelWidth">
          <el-input v-model="form.id" :disabled="form.status" autocomplete="off" />
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="form.floor" :disabled="form.status" autocomplete="off" />
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="form.address" :disabled="form.status" autocomplete="off" />
        </el-form-item>
        <el-form-item label="支付方式" :label-width="formLabelWidth">
          <el-radio-group v-model="form.pay" :disabled="form.status">
            <el-radio label="微信">微信</el-radio>
            <el-radio label="支付宝">支付宝</el-radio>
            <el-radio label="银行卡">银行卡</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <template v-if="!form.status">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </template>
      </div>
    </el-dialog>

  </div>

</template>

• js

import { getData } from '@/api/table'
export default {
    components: {

    },
    data() {
        return {
            tableData: [],
            query: {},
            loadingStatus: true,
            selectArr: [],
            dialogFormVisible: false,
            formLabelWidth: '120px',
            form: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            const { beans } = await getData(this.query)
            this.tableData = beans
            this.loadingStatus = false
        },
        /* 表格查看 */
        handleLook(row) {
            this.dialogFormVisible = true
            this.form = row
            this.form.status = true
        },
        /* 表格编辑 */
        handleEdit(row) {
            // this.dialogFormVisible = true
            this.form = row
            this.form.status = false
            if (!this.regId(this.form.id)) {
                this.$message.error('id格式不正确')
                return
            }
            this.$router.push({ path: '/table/home/' + this.form.id })
            sessionStorage.tableQuery = JSON.stringify(this.form)
        },
        /* 校验id*/
        regId(id) {
            var reg = /^\d+$/
            return reg.test(id)
        },
        /* 表格删除 */
        handleDelete(index) {
            this.$confirm('此操作将永久删除该行表格, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功!',
                    offset: 300
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        /* 带选项的筛选 */
        filterHandler(value, row, column) {
            const property = column['property']
            return row[property] === value
        },

        /* 操作改变 */
        handleSelectionChange(selArr) {
            if (selArr.length > 1) {
                this.$refs.tableSelection.toggleRowSelection(selArr[selArr.length - 1])
                this.$message({
                    showClose: true,
                    message: `最多只能选择1条！！！`,
                    type: 'warning'
                })
                return
            }
            this.selectArr = selArr
            console.log(selArr)
        }
    }
}

• css

<style scoped>
.table-box{
    padding:20px 2%;
    width:96%
}
.table-img1{
    width:100%;display: block
}
.el-button{margin-right: 5px; cursor: pointer;}
</style>