【进阶Ant-Design-Vue】你知道table多级表头嵌套展开写法吗？_a-table-column

用户57923016702
67 阅读3分钟 
//修改表头颜色
rowClassName(record,index) {
    let tableBack = "table-back"
    return tableBack;
},

（二）、写法二（头尾分离）

先写好布局，相对来说布局更简洁：

<a-col :span="24">
    <div style="margin: 10px 0;">
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="handleTagCheckAllChange">全选</a-checkbox>
        <a-checkbox-group v-model="checkedTagList" :options="varTagOptions" @change="handleTagChange"/>
    </div>
</a-col>
<a-table :rowClassName="rowClassName" :columns="columns" :data-source="data" bordered :pagination="false" :scroll="{ x: 1300, y: scrollHeight - 270 }">
</a-table>

其次先定义外部数据columns和data(同上)：

const columns = [
        {
            title: '设备名称',
            dataIndex: 'devicename',
            key: 'devicename',
            align: 'center',
            width: 200,
            fixed: 'left'
        },
        {
            title: '状态',
            align: 'center',
            isShow: true,//控制列元素是否显示
            children: [
                {
                    title: '运行状态',
                    dataIndex: 'runstatus',
                    key: 'runstatus',
                    align: 'center',
                    width: 120,
                    // scopedSlots: {customRender: 'runstatus'}
                },
            ]
        },
        {
            title: '压力 Mpa',
            isShow: true,//控制列元素是否显示
            children: [
                {
                    title: '高压',
                    dataIndex: 'ia',
                    key: 'ia',
                    width: 120,
                    align: 'center'
                },
                {
                    title: '中压',
                    dataIndex: 'ib',
                    key: 'ib',
                    width: 120,
                    align: 'center'
                },
                {
                    title: '低压',
                    dataIndex: 'ic',
                    key: 'ic',
                    width: 120,
                    align: 'center'
                }
            ]
        },
        {
            title: '功率',
            isShow: true,//控制列元素是否显示
            children: [
                {
                    title: 'A相有功 kW',
                    dataIndex: 'pa',
                    key: 'pa',
                    width: 160,
                    align: 'center'
                },
                {
                    title: 'B相有功 kW',
                    dataIndex: 'pb',
                    key: 'pb',
                    width: 160,
                    align: 'center'
                },
                {
                    title: 'C相有功 kW',
                    dataIndex: 'pc',
                    key: 'pc',
                    width: 160,
                    align: 'center'
                },
                {
                    title: '有功功率 kW',
                    dataIndex: 'p',
                    key: 'p',
                    width: 160,
                    align: 'center'
                },
                {
                    title: 'A相无功 kVar',
                    dataIndex: 'qa',
                    key: 'qa',
                    width: 160,
                    align: 'center'
                },
                {
                    title: 'B相无功 kVar',
                    dataIndex: 'qb',
                    key: 'qb',
                    width: 160,
                    align: 'center'
                },
                {
                    title: 'C相无功 kVar',
                    dataIndex: 'qc',
                    key: 'qc',
                    width: 160,
                    align: 'center'
                },
                {
                    title: '无功功率 kVar',
                    dataIndex: 'q',
                    key: 'q',
                    width: 160,
                    align: 'center'
                },
                {
                    title: '视在功率 kVA',
                    dataIndex: 's',
                    key: 's',
                    width: 160,
                    align: 'center'
                }
            ]
        },
    ];

定义return数据源变量：

scrollHeight: window.innerHeight - 160,
checkAll: true,
indeterminate: false,
columns,
data,
colIsTrue: [],
checkValue:[],
colOptions:[
    {label:'状态',value:0,onChange:this.colChange},
    {label:'压力',value:1,onChange:this.colChange},
    {label:'功率',value:2,onChange:this.colChange},
],

还是在methods中定义一个方法，修改表头颜色（同上）：

//修改表头颜色
rowClassName(record,index) {
    let tableBack = "table-back"
    return tableBack;
},

二、单选、全选控制

上面的准备工作基本做完了，下面的是和标签展开写法一是搭配用的 ，我们要进行处理js：

先对单选勾选框处理：

colChange(e){
    const index = e.target.value;
    // this.colIsTrue[index] ? (this.$set(this.colIsTrue,index,false)) : (this.$set(this.colIsTrue,index,true))
    if(e.target.checked) {
        this.checkValue.push(index);  this.$set(this.colIsTrue, index, true);
    } else{
        this.$set(this.colIsTrue, index, false);
        this.checkValue.forEach((item,arrIndex)=>{
            if(item==index){
                this.checkValue.splice(arrIndex,1)
            }
        })
    }
},

再处理全选复选框：

handleTagCheckAllChange(e) { 
    if(e.target.checked){
        let arrChange = [];
        for(let item of this.colOptions){ 
            arrChange.push(item.value);
        }
        this.checkValue = arrChange;
        this.colIsTrue.forEach((item, index) => {
            this.$set(this.colIsTrue, index, true);
        })
    }else{
        this.checkValue = [];
        this.colIsTrue.forEach((item, index) => {
            this.$set(this.colIsTrue, index, false);
        })
    }
    this.checkAll = e.target.checked;//全选的状态
    this.indeterminate = false;
},

最后钩子函数created和mounted中加入：

created() {
    this.checkValue = [];
    当所有数据都加载完成之后，将checkbox设置为全部选中状态
    this.colOptions && this.colOptions.forEach((item,index)=>{
        this.colIsTrue.push(true)
        this.checkValue.push(index)
    })
},

mounted() {
    this.checkValue = [];
    this.colOptions && this.colOptions.forEach((item,index)=>{
        this.colIsTrue.push(true)
        this.checkValue.push(index) 
    })
},

三、完整代码：

<template>
<div>
  <a-row>
    <a-col :span="24">
        <div style="margin: 10px 0;">
            <a-checkbox :indeterminate="indeterminate" :checked="checkAll"@change="handleTagCheckAllChange">全选</a-checkbox>
            <!-- 勾选复选框 -->
            <a-checkbox-group :value="checkValue" :options="colOptions"/>
        </div> 
     </a-col>
  </a-row>
  <a-table :rowClassName="rowClassName" :dataSource="data" bordered :pagination="false" x="true" :locale="{emptyText: '暂无数据'}" :scroll='{x:1300, y: scrollHeight - 270}' >
    <a-table-column dataIndex="devicename"  key="devicename" :width="160" :ellipsis="true" align="center" title="名称" fixed="left"></a-table-column>
    <a-table-column-group v-if="colIsTrue[0]" title="状态" align="center"> 
        <a-table-column title="运行状态" key="runstatus" :width="140" dataIndex="runstatus" align="center"></a-table-column>
    </a-table-column-group>
    <a-table-column-group v-if="colIsTrue[1]" title="压力 Mpa" align="center">
        <a-table-column title="高值" key="ia" :width="100" dataIndex ='ia' align="center" ></a-table-column>
        <a-table-column title="中值" key="ib" :width="100" dataIndex ='ib' align="center" ></a-table-column>
        <a-table-column title="低值" key="ic" :width="100" dataIndex ='ic' align="center" ></a-table-column>
    </a-table-column-group>
    <a-table-column-group v-if="colIsTrue[2]" title="功率 kW" align="center" >
        <a-table-column title="A相有功 kW" key="pa" dataIndex ='pa' :width="150" align='center'></a-table-column>
        <a-table-column title="B相有功 kW" key="pb" dataIndex ='pb' :width="150" align='center'></a-table-column>
        <a-table-column title="C相有功 kW" key="pc" dataIndex ='pc' :width="150" align='center'></a-table-column>
        <a-table-column title="有功功率 kW" key="p" dataIndex ='p' :width="150" align='center'></a-table-column>
        <a-table-column title="A相无功 kVar" key="qa" dataIndex ='qa' :width="150" align='center'></a-table-column>
        <a-table-column title="B相无功 kVar" key="qb" dataIndex ='qb' :width="150" align='center'></a-table-column>
        <a-table-column title="C相无功 kVar" key="qc" dataIndex ='qc' :width="150" align='center'></a-table-column>
        <a-table-column title="无功功率 kVar" key="q" dataIndex ='q' :width="150" align='center'></a-table-column>
        <a-table-column title="视在功率 kVA" key="s" dataIndex ='s' :width="150" align='center'></a-table-column>
    </a-table-column-group>
 </a-table>
</div>
</template>
<script>
    import moment from 'moment';
    const data = [
        {
            key: 1,
            devicename: "模板1",
            runstatus: "正常",
            ia: "0.5",
            ib: "0.1",
            ic: "0.2",
            pa: "100",
            pb: "100",
            pc: "120",
            p: "110",
            qa: "200",
            qb: "300",
            qc: "400",
            q: "500",
            s: "220",
        },{
            key: 2,
            devicename: "模板2",
            runstatus: "异常",
            ia: "0.5",
            ib: "0.1",
            ic: "0.2",
            pa: "100",
            pb: "100",
            pc: "120",
            p: "110",
            qa: "200",
            qb: "300",
            qc: "400",
            q: "500",
            s: "220",
        }
    ];
    
    export default {
        data() {
           return {
                scrollHeight: window.innerHeight - 160,
                checkAll: true,
                indeterminate: false,
                data,
                colIsTrue: [],
                checkValue:[],
                colOptions:[
                    {label:'状态',value:0,onChange:this.colChange},
                    {label:'压力',value:1,onChange:this.colChange},
                    {label:'功率',value:2,onChange:this.colChange},
                ],
           }
        },

        methods: {

            //修改表头颜色
            rowClassName(record,index) {
                let tableBack = "table-back"
                return tableBack;
            },
            
            //*全选复选框
            handleTagCheckAllChange(e) { 
                if(e.target.checked){
                    let arrChange = [];
                    for(let item of this.colOptions){ 
                        arrChange.push(item.value);
                    }
                    this.checkValue = arrChange;
                    this.colIsTrue.forEach((item, index) => {
                        this.$set(this.colIsTrue, index, true);
                    })
                }else{
                    this.checkValue = [];
                    this.colIsTrue.forEach((item, index) => {
                        this.$set(this.colIsTrue, index, false);
                    })
                }
                this.checkAll = e.target.checked;//全选的状态
                this.indeterminate = false;
            },

            //单个选择勾选
            colChange(e){
                const index = e.target.value;
                // this.colIsTrue[index] ? (this.$set(this.colIsTrue,index,false)) : (this.$set(this.colIsTrue,index,true))
                if(e.target.checked) {
                    this.checkValue.push(index);  this.$set(this.colIsTrue, index, true);
                }
                else{
                    this.$set(this.colIsTrue, index, false);
                    this.checkValue.forEach((item,arrIndex)=>{
                        if(item==index){
                            this.checkValue.splice(arrIndex,1)
                        }
                    })
                }
            },
            
        },
        
        created(){
            this.checkValue = [];
            //测试*当所有数据都加载完成之后，将checkbox设置为全部选中状态
            this.colOptions && this.colOptions.forEach((item,index)=>{
                this.colIsTrue.push(true)
                this.checkValue.push(index)
            })
        },

        mounted() {
            this.checkValue = [];
            this.colOptions && this.colOptions.forEach((item,index)=>{
                this.colIsTrue.push(true)
                this.checkValue.push(index) 
            })
        },
    }
</script>

四、总结

（还是自己看下面的官方文档吧，官方的都是精髓）

（1）关于a-checkbox

Checkbox

参数说明类型默认值版本
autoFocus自动获取焦点booleanfalse
checked指定当前是否选中booleanfalse
defaultChecked初始是否选中booleanfalse
disabled失效状态booleanfalse
indeterminate设置 indeterminate 状态，只负责样式控制booleanfalse

事件 #

事件名称说明回调参数版本
change变化时回调函数Function(e:Event)-

Checkbox Group #

参数说明类型默认值版本
defaultValue默认选中的选项string[][]
disabled整组失效booleanfalse
nameCheckboxGroup 下所有 input[type="checkbox"] 的 name 属性string-1.5.0
options指定可选项，可以通过 slot="label" slot-scope="option" 定制labelstring[]Array<{ label: string value: string disabled?: boolean, indeterminate?: boolean, onChange?: function }>[]
value指定选中的选项string[][]

事件 #

事件名称说明回调参数版本

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

前端面试题汇总

JavaScript

前端资料汇总

开源分享：docs.qq.com/doc/DSmRnRG…

avatar
文章
阅读
粉丝