antdesign-vue表格table组件列字段筛选

<template><div class="boxbig"><div class="mean-content"><div class="right-btns"><!-- 按钮 --><a-button class="table"@click="handleTable"><a-icon type="table" /></a-button><!-- 弹出框 --><div class="tableSelect"v-if="tableSelectVisible"><a-checkbox-group :value="checkValue":options="colOptions" /><a-button class="table"@click="tableSelectVisible=false">关闭</a-button></div></div><div class="pqc-table"><!-- 表格内容 --><a-table :dataSource="expertList":rowKey='record=>record.id':pagination="false"style="width:100%"class="wocao":scroll="{ x: 900,y:332 } "><a-table-column v-if="colIsTrue[0]"title="a"dataIndex="a"key="a"class="hang"style="width:80px" /><a-table-column v-if="colIsTrue[1]"title="b"dataIndex="b"style="width:80px"class="maxhang"key="b" /><a-table-column v-if="colIsTrue[2]"title="c"class="hang"style="width:80px"dataIndex="c"key="c" /><a-table-column v-if="colIsTrue[3]"title="d"class="hang"style="width:80px"dataIndex="d"key="d" /><a-table-column v-if="colIsTrue[4]"title="e"class="hang"style="width:80px"dataIndex=ekey="e" /><a-table-column v-if="colIsTrue[5]"title="f"class="hang"style="width:80px"dataIndex='f'key="f" /><a-table-column v-if="colIsTrue[6]"title="g"dataIndex='g'style="width:80px"class="hang"key="g" /><a-table-column v-if="colIsTrue[7]"title="h"dataIndex='h'style="width:80px"class="hang"key="h" /><a-table-column v-if="colIsTrue[8]"title="i"class="hang"style="width:80px"dataIndex='i'key="i" /><a-table-column v-if="colIsTrue[9]"title="j"dataIndex='j'style="width:80px"class="hang"key="j" /><a-table-column v-if="colIsTrue[10]"title="k"dataIndex='k'style="width:80px"class="hang"key="k" /><a-table-column v-if="colIsTrue[11]"title="l"dataIndex='l'class="hang"style="width:80px"key="l" /><a-table-column v-if="colIsTrue[12]"title="m"dataIndex='m'style="width:80px"class="hang"key="m" /><a-table-column v-if="colIsTrue[13]"title="n"dataIndex='n'style="width:80px"class="hang"key="n" /><a-table-column v-if="colIsTrue[14]"title="o"dataIndex='o'class="hang"style="width:80px"key="o" /><a-table-column v-if="colIsTrue[15]"title="p"dataIndex='p'style="width:80px"class="hang"key="p" /><a-table-column v-if="colIsTrue[16]"title="q"dataIndex='q'class="hang"style="width:80px"key="q" /><a-table-column v-if="colIsTrue[17]"title="r"dataIndex='r'style="width:80px"class="hang"key="r" /><a-table-column v-if="colIsTrue[18]"title="s"dataIndex='s'class="hang"style="width:80px"key="s" /><a-table-column v-if="colIsTrue[19]"title="t"dataIndex='t'style="width:80px"class="hang"key="t" /><a-table-column v-if="colIsTrue[20]"title="u"dataIndex='u'class="hang"style="width:80px"key="u" /><a-table-column v-if="colIsTrue[21]"title="v"dataIndex='v'style="width:80px"class="hang"key="v" /><a-table-column v-if="colIsTrue[22]"title="w"dataIndex='w'class="hang"style="width:80px"key="w" /><a-table-column v-if="colIsTrue[23]"title="x"dataIndex='x'class="hang"style="width:80px"key="x" /><a-table-column v-if="colIsTrue[24]"title="y"dataIndex='y'style="width:80px"class="hang"key="y" /><a-table-column v-if="colIsTrue[25]"title="z"dataIndex='z'style="width:80px"class="hang"key="z" /><a-table-column v-if="colIsTrue[26]"title="A"dataIndex='A'class="hang"style="width:80px"key="A" /><a-table-column v-if="colIsTrue[27]"title="B"dataIndex='B'class="hang"style="width:80px"key="B" /><a-table-column v-if="colIsTrue[28]"title="C"dataIndex='C'style="width:80px"class="hang"key="C" /><a-table-column v-if="colIsTrue[29]"title="D"dataIndex='D'class="hang"style="width:80px"key="D" /><a-table-column v-if="colIsTrue[30]"title="E"dataIndex='E'class="hang"style="width:80px"key="E" /><a-table-column v-if="colIsTrue[31]"title="F"class="hang"dataIndex='F'style="width:80px"key="F" /><!-- <a-table-column title="操作"key="action"><template slot-scope="record"><a-button size="small"icon="edit"type="primary"@click="openUpd(record.id)">编辑</a-button><a-button size="small"icon="delete"type="primary"@click="openDel(record)">删除</a-button></template></a-table-column> --></a-table></div><div class="table-pagination">{{colIsTrue}}{{checkValue}}<a-config-provider :locale="$store.getters.language === 'en' ? enUS : zhCN"><a-pagination :show-total="(total, range) =>`${$t('Implementation.sum')} ${2}${$t('Implementation.count')}`"size="small"show-size-changer /></a-config-provider></div></div></div>
</template><script>
import store from "@/store";
import zhCN from "ant-design-vue/es/locale-provider/zh_CN";
import enUS from "ant-design-vue/es/locale-provider/en_US";
export default {name: 'checkMeaningShow',data () {return {zhCN,enUS,tableSelectVisible: false,colOptions: [{ label: 'a', value: 0, onChange: this.colChange },{ label: 'b', value: 1, onChange: this.colChange },{ label: 'c', value: 2, onChange: this.colChange },{ label: 'd', value: 3, onChange: this.colChange },{ label: 'e', value: 4, onChange: this.colChange },{ label: 'f', value: 5, onChange: this.colChange },{ label: 'g', value: 6, onChange: this.colChange },{ label: 'h', value: 7, onChange: this.colChange },{ label: 'i', value: 8, onChange: this.colChange },{ label: 'j', value: 9, onChange: this.colChange },{ label: 'k', value: 10, onChange: this.colChange },{ label: 'l', value: 11, onChange: this.colChange },{ label: 'm', value: 12, onChange: this.colChange },{ label: 'n', value: 13, onChange: this.colChange },{ label: 'o', value: 14, onChange: this.colChange },{ label: 'p', value: 15, onChange: this.colChange },{ label: 'q', value: 16, onChange: this.colChange },{ label: 'r', value: 17, onChange: this.colChange },{ label: 's', value: 18, onChange: this.colChange },{ label: 't', value: 19, onChange: this.colChange },{ label: 'u', value: 20, onChange: this.colChange },{ label: 'v', value: 21, onChange: this.colChange },{ label: 'w', value: 22, onChange: this.colChange },{ label: 'x', value: 23, onChange: this.colChange },{ label: 'y', value: 24, onChange: this.colChange },{ label: 'z', value: 25, onChange: this.colChange },{ label: 'A', value: 26, onChange: this.colChange },{ label: 'B', value: 27, onChange: this.colChange },{ label: 'C', value: 28, onChange: this.colChange },{ label: 'D', value: 29, onChange: this.colChange },{ label: 'E', value: 30, onChange: this.colChange },{ label: 'F', value: 31, onChange: this.colChange },],colIsTrue: [],checkValue: [],expertList: []}},created () {//当所有数据都加载完成之后，将checkbox设置为全部选中状态this.expertList = '1232412412414'.split('').map((v, i) => ({ a: '231', b: '大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发方法为伟大发发', c: '大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发', d: '1111大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发1', e: '', f: '大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发', g: '11111', h: '', i: '', j: '11111', k: '', l: '', m: '11111', n: '', o: '', p: '11111', q: '', r: '', s: '11111', t: '', u: '', v: '11111', w: '', x: '', y: '11111', z: '', A: '11111', B: '', C: '大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发', F: 'wocao大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发', id: i }))this.colOptions && this.colOptions.forEach((item, index) => {this.colIsTrue.push(true)this.checkValue.push(index)})},mounted () {//菜单栏弹出后，点击其它地方，关闭菜单栏// let that = this;document.getElementsByClassName("pqc-table")[0].addEventListener("click", this.clickHandler, false)// $(document).bind("click", function (e) {//   var target = $(e.target);//   if (target.closest(".tableSelect").length == 0 && target[0].className.indexOf('table') == -1) {//     that.tableSelectVisible = false;//   }// })this.colOptions && this.colOptions.forEach((item, index) => {this.colIsTrue.push(true)this.checkValue.push(index)})},methods: {clickHandler () {this.tableSelectVisible = false},colChange (e) {//当checkbox有修改时const index = e.target.value;this.colIsTrue[index] === true ?this.$set(this.colIsTrue, index, false) :this.$set(this.colIsTrue, index, true)if (e.target.checked) this.checkValue.push(index)else {this.checkValue.forEach((item, arrIndex) => {if (item == index) {console.log('item', item, 'index', index)this.checkValue.splice(arrIndex, 1)this.$set(this, 'checkValue', this.checkValue)}})}},handleTable () {//打开菜单栏this.tableSelectVisible = true;},}};
</script><style lang="scss" scoped>
.hang {width: 100px !important;
}
.right-btns {position: relative;.tableSelect {position: absolute;background: #fff;border: 1px solid #ecedef;display: inline-block;top: 33px;left: 0;z-index: 100;padding: 10px;width: 80px;height: 30vw;overflow-y: scroll;}
}
.calss-1 {width: 100%;
}
.table-pagination {text-align: right;margin-top: 30px;
}
.pqc-table {width: 100vw;
}
.ant-table-fixed {th {width: 10vw;}
}
/deep/.ant-table-tbody > tr > td,
.ant-table-thead > tr > th {padding: 0 4px !important;// /* word-wrap: break-word; */word-wrap: normal;
}
.mean-content {width: 100vw;
}
</style>

antdesign-vue表格table组件列字段筛选相关推荐

vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
Antd Table组件列宽的一些疑惑
前言前些年参与的几个项目,前端部分主要采用Vue+ElementUI进行开发.最近参与的项目,前端部分大胆的转向了React+Antd. 疑惑在之前的Vue+ElementUI项目里,Table组 ...
vue的table组件
一个vue-table的组件说明: 1.基于element-ui开发的vue表格组件. 功能: 1.支持树形数据的展示 2.行拖拽排序 3.单元格拖拽排序 github 使用方法: 1.下载npm包 ...
ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...
基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
ant-design vue的tree组件点击小三角符号展开，触点太小的问题
直接进入正题,需求目的是加大三角的触点,让点击标题的时候也能触发展开列的效果树形节点的select事件会接受两个参数,一个是节点id,一个是event; 细心地你会发现,event对象里面有一个no ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
vue获取table一列数据_vue表格含有一列多选框，如何获取被选中的行的数据？
1.仿照element-ui官网贴出的demo,table表格多选,选择多行数据时使用 Checkbox.但是无法获取this.multipleSelection的值.相关代码如下: 男女个人团 ...
vue+elementui Table组件splice删除表格总是删除最后一行
原因是没有给table下面的row加key,才导致的问题解决方法: 在 el-table 标签里加一个 row-key 属性 <el-table :data="tableData& ...

antdesign-vue表格table组件列字段筛选

antdesign-vue表格table组件列字段筛选相关推荐

最新文章

热门文章