<template>
? <div class="oDiv">
? ? <div style="margin-top: 20px">
? ? ? <el-button @click="delArray()" type="danger">批量刪除</el-button>
? ? ? <el-button @click="toggleSelection()">取消選擇</el-button>
? ? </div>
? ? <el-table
? ? ? :data="tableData"
? ? ? ref="multipleTable"
? ? ? style="width: 100%"
? ? ? max-height="250"
? ? ? @selection-change="handleSelectionChange">
? ? ? <el-table-column
? ? ? ? type="selection"
? ? ? ? width="55">
? ? ? </el-table-column>
? ? ? <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="120">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-button
? ? ? ? ? ? @click.native.prevent="deleteRow(scope.$index, tableData)"
? ? ? ? ? ? type="text"
? ? ? ? ? ? size="small">
? ? ? ? ? ? 移除
? ? ? ? ? </el-button>
? ? ? ? </template>
? ? ? </el-table-column>
? ? </el-table>
? </div>
</template>
<script>
export default {
? data () {
? ? return {
? ? ? tableDataAmount: [],
? ? ? tableData: [{
? ? ? ? date: '2016-05-03',
? ? ? ? name: '王小虎1',
? ? ? ? province: '上海',
? ? ? ? city: '普陀區(qū)',
? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄',
? ? ? ? zip: 200333
? ? ? }, {
? ? ? ? date: '2016-05-02',
? ? ? ? name: '王小虎2',
? ? ? ? province: '上海',
? ? ? ? city: '普陀區(qū)',
? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄',
? ? ? ? zip: 200333
? ? ? }, {
? ? ? ? date: '2016-05-04',
? ? ? ? name: '王小虎3',
? ? ? ? province: '上海',
? ? ? ? city: '普陀區(qū)',
? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄',
? ? ? ? zip: 200333
? ? ? }]
? ? }
? },
? methods: {
? ? deleteRow (index, rows) {
? ? ? rows.splice(index, 1)
? ? },
? ? // 選擇事件 得到選中的數(shù)據(jù)
? ? handleSelectionChange (data) {
? ? ? this.tableDataAmount = data
? ? },
? ? // 批量清除
? ? delArray () {
? ? ? var that = this
? ? ? // 拿到選中的數(shù)據(jù)孟害；
? ? ? var val = this.tableDataAmount
? ? ? // 如果選中數(shù)據(jù)存在
? ? ? if (val) {
? ? ? ? // 將選中數(shù)據(jù)遍歷
? ? ? ? val.forEach(function (item, index) {
? ? ? ? ? // 遍歷源數(shù)據(jù)
? ? ? ? ? that.tableData.forEach(function (itemI, indexI) {
? ? ? ? ? ? // 如果選中數(shù)據(jù)跟元數(shù)據(jù)某一條標(biāo)識(shí)相等钞钙，刪除對(duì)應(yīng)的源數(shù)據(jù)
? ? ? ? ? ? if (item.name === itemI.name) {
? ? ? ? ? ? ? that.tableData.splice(indexI, 1)
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? })
? ? ? }
? ? ? // 清除選中狀態(tài)
? ? ? this.$refs.multipleTable.clearSelection()
? ? }
? }
}
</script>
