• 表格可行内编辑,列可动态显示隐藏


    小颖前段时间做的项目里需要实现一个功能:表格可以行内编辑,并且表格的部分列是固定的,部分列随着右上角勾选的可显示列的变化而变化,在右侧我勾选了那些列,表格才能显示那些列,如果我没有勾选则不显示。

    具体效果如图所示:

    具体代码:

    小颖用的vue+Ant Design of Vue

    html:

    <template>
        <div class="table-dynamic-column">
            <p class="txt-right">
                <a-dropdown :trigger="['click']">
                    <i class="fa fa-bars ant-dropdown-link"></i>
                    <a-menu slot="overlay">
                        <a-menu-item key="1" :disabled="true" class="have-disabled">
                            <a-checkbox :indeterminate="indeterminate"
                                        @change="selectAllFun" :checked="checked">全选/反选
                            </a-checkbox>
                        </a-menu-item>
                        <a-menu-item key="2" :disabled="true" class="have-disabled">
                            <a-checkbox-group v-model="showColumn" @change="hideColumnChange()">
                                <div class="dropdown-menu-item-tem" v-for="(item,index) in movingColumns" @click="hideColumnFun(index)"
                                     :key="index">
                                    <a-checkbox :value="item.dataIndex">
                                        <span class="hide-column-tem">{{item.title}}</span>
                                    </a-checkbox>
                                </div>
                            </a-checkbox-group>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </p>
            <a-table :columns="columns" :dataSource="data" bordered>
                <template
                        v-for="col in editColumnDt"
                        :slot="col"
                        slot-scope="text, record"
                >
                    <div :key="col">
                        <a-input
                                v-if="record.editable"
                                style="margin: -5px 0"
                                :value="text"
                                @change="e => handleChange(e.target.value, record.key, col)"
                        />
                        <template v-else>{{text}}</template>
                    </div>
                </template>
                <template slot="operation" slot-scope="text, record">
                    <div class="editable-row-operations" v-if="columns.length>3">
                        <span v-if="record.editable">
                            <a @click="() => save(record.key)">Save</a>
                            <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
                                <a>Cancel</a>
                            </a-popconfirm>
                        </span>
                        <span v-else><a @click="() => edit(record.key)">Edit</a></span>
                    </div>
                    <div v-else>暂无操作</div>
                </template>
            </a-table>
        </div>
    </template>

    js:

    <script>
        const columns = [
            {
                title: 'name',
                dataIndex: 'name',
                scopedSlots: { customRender: 'name' },
            },
            {
                title: 'age',
                dataIndex: 'age',
                scopedSlots: { customRender: 'age' },
            },
            {
                title: 'operation',
                dataIndex: 'operation',
                scopedSlots: { customRender: 'operation' },
            },
        ];
    
        const data = [];
        for (let i = 0; i < 100; i++) {
            data.push({
                key: i.toString(),
                name: `Edrward ${i}`,
                age: 32,
                phone: 15388646322,
                address: `London Park no. ${i}`,
            });
        }
        export default {
            name: "tableDynamicColumn",
            data() {
                this.cacheData = data.map(item => ({ ...item }));
                return {
                    checked: true,
                    indeterminate: false,
                    data,
                    columns,
                    editColumnDt: [],//可编辑的列
                    movingColumns: [],//动态显示列
                    showColumn: [],//不隐藏的列
                    hideColumnIndex: null,//当前点的那个复选框
                };
            },
            mounted() {
                this.getDynamicColumn()
            },
            methods: {
                //获取动态列信息
                getDynamicColumn(){
                    //    调接口获取动态列
                    const that = this
                    const responseData = [
                        {
                            title: 'address',
                            dataIndex: 'address',
                            scopedSlots: {customRender: 'address'},
                        }, {
                            title: 'phone',
                            dataIndex: 'phone',
                            scopedSlots: {customRender: 'phone'},
                        }
                    ]
                    const newData = [...responseData]
                    newData.forEach(function (item, index) {
                        that.editColumnDt[index] = item.dataIndex
                        that.showColumn[index] = item.dataIndex
                    })
                    this.movingColumns = newData
                    const operation = this.columns.splice(2, 1)
                    this.columns = this.columns.concat(newData)
                    this.columns = this.columns.concat(operation)
                },
                handleChange(value, key, column) {
                    const newData = [...this.data];
                    const target = newData.filter(item => key === item.key)[0];
                    if (target) {
                        target[column] = value;
                        this.data = newData;
                    }
                },
                edit(key) {
                    const newData = [...this.data];
                    const target = newData.filter(item => key === item.key)[0];
                    if (target) {
                        target.editable = true;
                        this.data = newData;
                    }
                },
                save(key) {
                    const newData = [...this.data];
                    const target = newData.filter(item => key === item.key)[0];
                    if (target) {
                        delete target.editable;
                        this.data = newData;
                        this.cacheData = newData.map(item => ({ ...item }));
                    }
                },
                cancel(key) {
                    const newData = [...this.data];
                    const target = newData.filter(item => key === item.key)[0];
                    if (target) {
                        Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
                        delete target.editable;
                        this.data = newData;
                    }
                },
                //全选/反选
                selectAllFun(e){
                    this.checked = e.target.checked
                    this.indeterminate = false
                    if(e.target.checked){//全选
                        this.showColumn = this.movingColumns.map(function (item) {
                            item.hideCol = false
                            return item.dataIndex
                        })
                        const operation = this.columns.splice(2, 1)
                        this.columns = this.columns.concat(this.movingColumns)
                        this.columns = this.columns.concat(operation)
                    }else {//反选
                        this.showColumn = []
                        this.movingColumns.map(function (item) {
                            item.hideCol = true
                        })
                        this.movingColumnFun()
                    }
                },
                //右侧显示隐藏的复选框的change事件
                hideColumnChange(){
                    this.indeterminate = false
                    this.checked = false
                    const newData = [...this.showColumn]
                    //全选
                    if (newData.length === this.movingColumns.length) {
                        this.checked = true
                    }
                    //半选样式
                    if (newData.length !== 0 && newData.length < this.movingColumns.length) {
                        this.indeterminate = true
                    }
                    const index = this.hideColumnIndex
                    const target = newData.filter(item => this.movingColumns[index].dataIndex === item)[0];
                    if (target) {
                        this.$set(this.movingColumns[index], 'hideCol', false)
                    } else {
                        this.$set(this.movingColumns[index], 'hideCol', true)
                    }
                    this.movingColumnFun()
                },
                movingColumnFun(){
                    const _movingColumns = this.movingColumns.filter(item => {
                        if (!item.hideCol) {
                            return item
                        }
                    })
                    const operation = this.columns.splice(this.columns.length - 1, 1)//截取操作列
                    const _columns = this.columns.slice(0, 2)//先回归固定列
                    this.columns = _columns.concat(_movingColumns)
                    this.columns = this.columns.concat(operation)
                },
                //隐藏列单独勾选
                hideColumnFun(index) {
                    this.hideColumnIndex = index
                }
            }
        }
    </script>

    css:

    <style scoped>
        .editable-row-operations a {
            margin-right: 8px;
        }
        .txt-right{
            padding: 20px 5px 10px 0;
        }
    </style>

    具体实现请移步:小颖Git

  • 相关阅读:
    Ecommerce 3.0雏形出现
    网上购物折扣如此红火
    [ZZ]将测试人员整合到敏捷团队中
    晒工资网——Glassdoor
    [ZZ].NET自动探索式测试工具——Pex
    [ZZ]好的测试应该具备哪些特质?
    我用到的Firefox插件
    [ZZ]WatiN & Selenium RC-自动化测试工具比较
    [ZZ]高盛:Amazon预计10年营收涨10倍达台币3兆元
    从优惠券到维络卡
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/12084355.html
Copyright © 2020-2023  润新知