Element UI之table常见功能整合

    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <!-- 选项框 -->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column align="center" type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column align="center" prop="date" label="图片" width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.image" min-width="70" height="70" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="date" label="日期" width="180" sortable>
            </el-table-column>
            <el-table-column align="center" prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column align="center" prop="address" label="开关" width="150">
                <template slot-scope="scope">
                    <!-- :active-value="1" 开 -->
                    <!-- :inactive-value="0" 关 -->
                    <el-switch v-model="scope.row.on" on-color="#00A854" on-text="启动" on-value="1" off-color="#F04134"
                        off-text="禁止" off-value="0" active-text="开" inactive-text="关" :active-value="1"
                        :inactive-value="0" @change="changeSwitch(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    id:0,
                    date: '2016-05-02 18:05:00',
                    name: '王小虎',
                    on: 1,
                    address: '上海市普陀区金沙江路 1518 弄',
                    image: 'https://img1.baidu.com/it/u=1808758566,2938298204&fm=26&fmt=auto&gp=0.jpg'
                }, {
                    id:1,
                    date: '2016-05-04 18:10:00',
                    name: '王小虎',
                    on: 0,
                    address: '上海市普陀区金沙江路 1517 弄',
                    image: 'https://img1.baidu.com/it/u=1808758566,2938298204&fm=26&fmt=auto&gp=0.jpg'
                }, {
                    id:2,
                    date: '2016-05-01 18:30:00',
                    name: '王小虎',
                    on: 1,
                    address: '上海市普陀区金沙江路 1519 弄',
                    image: 'https://img1.baidu.com/it/u=1808758566,2938298204&fm=26&fmt=auto&gp=0.jpg'
                }, {
                    id:3,
                    date: '2016-05-03 19:00:00',
                    name: '王小虎',
                    on: 0,
                    address: '上海市普陀区金沙江路 1516 弄',
                    image: 'https://img1.baidu.com/it/u=1808758566,2938298204&fm=26&fmt=auto&gp=0.jpg'
                }]
            }
        },
        methods: {
            //开关
            changeSwitch(row) {
                console.log("开关", row);
            },
            //修改
            handleEdit(index, row) {
                console.log("点击修改", index, row);
            },
            //删除
            handleDelete(index, row) {
                console.log("点击删除", index, row);
                this.$confirm(
                        '是否确认删除专区名称为"' + row.name + '"的数据项?',
                        "警告", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }
                    )
                    .then(function() {
                        // return delBrand(row.id);
                        console.log("第一步");
                    })
                    .then(() => {
                        // this.brand();
                        console.log("删除成功");
                    })
                    .catch(() => {});
            },
            //选项框
            handleSelectionChange(rows) {
                console.log("选项框",rows);
                
            }
        }
    }
</script>