精华内容

下载资源

问答

我要提问

【AntDesign Table】表格-可选择表格，选择框可隐藏 千次阅读
2020-04-26 16:52:42
需求：表格中的checkbox有三种状态：隐藏、禁用、可选。

原本是希望AntDesign中存在相应的option来配置隐藏checkbox，但没找到。只有在rowSelection里通过设置getCheckboxProps的相关属性配置。

既然无法直接在渲染列表时就决定隐藏和显示，

那就换个思路：等列表渲染完成后，再去隐藏checkbox。

问题：如何找到列表中需要隐藏的checkbox呢？

我的思路就是：

通过getCheckboxProps给需要隐藏的checkbox加个隐藏标志，然后列表渲染完后，通过操作dom，给相应的元素加个样式隐藏掉。

相关实现：

1、给要隐藏的checkbox，设置它的name为‘disabled’
```
private getCheckboxProps(record: any) {
    return {
      props: {
        name: !record.isAuthority ? 'disabled' : '',
        disabled: record.isDisabled || !record.isAuthority
      }
    }
  }
```
2、然后再操作dom，给它个隐藏样式
```
private hiddenCheckbox() {
    const displayCheckboxList = document.getElementsByName('disabled')
    displayCheckboxList.forEach((item: any) => {
      item.parentNode.parentNode.parentNode.className = item.className + ' hidden'
    })
  }
```
你会发现，怎么这么搞笑，要去往上找3层父级呢。

是因为，如果只是隐藏了这个初始状态的checkbox，当你点击全选的时候，这个checkbox是会再次出现的，并且是勾选状态的。

（因为点击全选，antDesign会重新赋值类名，如果hidden加在这层就会被覆盖掉了）

所以我就直接往上，把父级给隐藏掉。

但其实这个都是蠢办法，讲道理可以更快捷的，就是：

在getCheckboxProps里把它给禁用掉再隐藏，那你页面中的任何操作都不会算进这个checkbox了。

这个实现也还挺简单的。
javascript html typescript

更多相关内容
Vue使用AntDesign 表格可添加可编辑行 可选择
千次阅读 2020-12-19 21:54:53

Vue使用AntDesign 表格可添加可编辑行 可选择使用的是这个进行修改的，这个是绑定的数组，多以直接在里面多加一行空数据就可进行编辑在中只是多了一个添加的按钮添加:columns="columns":data-source="data...

Vue使用AntDesign 表格可添加可编辑行可选择

使用的是这个进行修改的，这个是绑定的数组，多以直接在里面多加一行空数据就可进行编辑

在中只是多了一个添加的按钮

添加

:columns="columns"

:data-source="data"

bordered

>

v-if="record.editable"

style="margin: -5px 0"

:value="text"

@change="e => handleChange(e.target.value, record.key, col)"

/>

{{ text }}

save(record.key)">保存

title="确定取消?"

okText="确定"

cancelText="取消"

@confirm="() => cancel(record.key)"

>

取消

edit(record.key)">修改

在

//显示的表头

const columns = [

{

title: "name",

dataIndex: "name",

width: "25%",

scopedSlots: { customRender: "name" }

},

{

title: "age",

dataIndex: "age",

width: "15%",

scopedSlots: { customRender: "age" }

},

{

title: "address",

dataIndex: "address",

width: "40%",

scopedSlots: { customRender: "address" }

},

{

title: "operation",

dataIndex: "operation",

scopedSlots: { customRender: "operation" }

}

];

//列表绑定的数组

const data = [];

// 数组创建时候的下标

var numbe = 0;

export default {

data() {

//这是将数组里面的值单列出来用的是ES6的语法 (在添加的方法里面也进行调用因为数据变化了所以取值)

this.cacheData = data.map(item => ({ ...item }));

return {

data,

columns,

editingKey: "",

selectedRowKeys: []

};

},

methods: {

//书写添加的按钮

add() {

data.push({

key: numbe.toString(),

name: "",

age: "",

address: ""

});

numbe++;

//console.log(data);

//重新取值

this.cacheData = data.map(item => ({ ...item }));

},

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];

this.editingKey = key;

if (target) {

target.editable = true;

this.data = newData;

}

},

save(key) {

const newData = [...this.data];

const newCacheData = [...this.cacheData];

const target = newData.filter(item => key === item.key)[0];

const targetCache = newCacheData.filter(item => key === item.key)[0];

if (target && targetCache) {

delete target.editable;

this.data = newData;

Object.assign(targetCache, target);

this.cacheData = newCacheData;

}

this.editingKey = "";

},

cancel(key) {

const newData = [...this.data];

const target = newData.filter(item => key === item.key)[0];

this.editingKey = "";

if (target) {

Object.assign(

target,

this.cacheData.filter(item => key === item.key)[0]

);

delete target.editable;

this.data = newData;

}

},

onSelectChange(selectedRowKeys) {

console.log("selectedRowKeys changed: ", selectedRowKeys);

this.selectedRowKeys = selectedRowKeys;

}

},

computed: {

hasSelected() {

return this.selectedRowKeys.length > 0;

}

}

};

这样就可以进点击按钮添加数据了

在表格里面进行添加复选框

//在table上面书写结构

{{ `Selected ${selectedRowKeys.length} items` }}

//在table上面添加这个将值传入

:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"

//data里面添加数据

selectedRowKeys: [], // Check here to configure the default column

//添加改变的方法调用

onSelectChange(selectedRowKeys) {

console.log('selectedRowKeys changed: ', selectedRowKeys);

this.selectedRowKeys = selectedRowKeys;

},

//添加计算属性

computed: {

hasSelected() {

return this.selectedRowKeys.length > 0;

},

},

然后是全部代码

添加

{{ `Selected ${selectedRowKeys.length} items` }}

:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"

:columns="columns"

:data-source="data"

bordered

>

v-if="record.editable"

style="margin: -5px 0"

:value="text"

@change="e => handleChange(e.target.value, record.key, col)"

/>

{{ text }}

save(record.key)">保存

title="确定取消?"

okText="确定"

cancelText="取消"

@confirm="() => cancel(record.key)"

>

取消

edit(record.key)">修改

const columns = [

{

title: "name",

dataIndex: "name",

width: "25%",

scopedSlots: { customRender: "name" }

},

{

title: "age",

dataIndex: "age",

width: "15%",

scopedSlots: { customRender: "age" }

},

{

title: "address",

dataIndex: "address",

width: "40%",

scopedSlots: { customRender: "address" }

},

{

title: "operation",

dataIndex: "operation",

scopedSlots: { customRender: "operation" }

}

];

const data = [];

// 数组创建时候的下标

var numbe = 0;

export default {

data() {

this.cacheData = data.map(item => ({ ...item }));

return {

data,

columns,

editingKey: "",

selectedRowKeys: []

};

},

methods: {

add() {

data.push({

key: numbe.toString(),

name: "",

age: "",

address: ""

});

numbe++;

console.log(data);

this.cacheData = data.map(item => ({ ...item }));

},

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];

this.editingKey = key;

if (target) {

target.editable = true;

this.data = newData;

}

},

save(key) {

const newData = [...this.data];

const newCacheData = [...this.cacheData];

const target = newData.filter(item => key === item.key)[0];

const targetCache = newCacheData.filter(item => key === item.key)[0];

if (target && targetCache) {

delete target.editable;

this.data = newData;

Object.assign(targetCache, target);

this.cacheData = newCacheData;

}

this.editingKey = "";

},

cancel(key) {

const newData = [...this.data];

const target = newData.filter(item => key === item.key)[0];

this.editingKey = "";

if (target) {

Object.assign(

target,

this.cacheData.filter(item => key === item.key)[0]

);

delete target.editable;

this.data = newData;

}

},

onSelectChange(selectedRowKeys) {

console.log("selectedRowKeys changed: ", selectedRowKeys);

this.selectedRowKeys = selectedRowKeys;

}

},

computed: {

hasSelected() {

return this.selectedRowKeys.length > 0;

}

}

};

.editable-row-operations a {

margin-right: 8px;

}

收起

展开全文
Excel表中只能选择固定内容
千次阅读 2021-12-17 13:12:18

一、实现效果二、实现方法 2.1、设置Excel表中只能选择指定内容

一、实现效果

二、实现方法

2.0、通用操作

①选中需要操作的列；

②选中顶部的导航栏【数据】；

③找到【数据工具】；

④点击【数据验证】；

2.1、设置Excel表中只能选择指定内容

①选中【设置】；

②选择【序列】；

③输入该列显示的下拉内容【且用英文逗号(,)分隔每个选项】；

④点击【确定】；

2.2、设置Excel表中只能输入指定内容

注意：如果需要在该输入的内容可以在开始输入的0不消失，需要设置单元格格式为【文本】

2.3、单元格输入信息时显示提示信息

2.4、单元格中输入信息不符合时提示对应的错误信息

收起

展开全文

Excel
Bootstrap 表格的可选样式
万次阅读 2018-03-06 09:58:06
表格的可选样式除了 .table 类之外，Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed，分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑...
除了 .table 类之外，Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed，分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥，可以根据需要，为一个表格应用多个类。

1、带条纹背景的表格

为 <table> 添加 .table-striped 类，就可以为 <tbody> 中的表格行添加条纹背景，即实现表格数据行的隔行换色效果。如：
1. <table class="table table-striped">
2. <thead>
3. <tr>
4. <th>#</th>
5. <th>First Name</th>
6. <th>Last Name</th>
7. <th>Username</th>
8. </tr>
9. </thead>
10. <tbody>
11. <tr>
12. <td>1</td>
13. <td>Mark</td>
14. <td>Otto</td>
15. <td>@mdo</td>
16. </tr>
17. <tr>
18. <td>2</td>
19. <td>Jacob</td>
20. <td>Thornton</td>
21. <td>@fat</td>
22. </tr>
23. <tr>
24. <td>3</td>
25. <td>Larry</td>
26. <td>the Bird</td>
27. <td>@twitter</td>
28. </tr>
29. </tbody>
30. </table>
效果如图 3‑23所示：
图3-23 Bootstrap带条纹背景的表格
注意：这个效果是通过 :nth-child 选择器实现的，但 IE8 及以下的版本不支持这个选择器，需要考虑兼容性处理方案。

2、带边框的表格

为 <table> 添加 .table-bordered 类，就可以为所有单元格加上边框，也同时为整个表格添加圆角边框效果。如：
1. <table class="table table-bordered">
2. <thead>
3. <tr>
4. <th>#</th>
5. <th>First Name</th>
6. <th>Last Name</th>
7. <th>Username</th>
8. </tr>
9. </thead>
10. <tbody>
11. <tr>
12. <td rowspan="2">1</td>
13. <td>Mark</td>
14. <td>Otto</td>
15. <td>@mdo</td>
16. </tr>
17. <tr>
18. <td>Mark</td>
19. <td>Otto</td>
20. <td>@TwBootstrap</td>
21. </tr>
22. <tr>
23. <td>2</td>
24. <td>Jacob</td>
25. <td>Thornton</td>
26. <td>@fat</td>
27. </tr>
28. <tr>
29. <td>3</td>
30. <td colspan="2">Larry the Bird</td>
31. <td>@twitter</td>
32. </tr>
33. </tbody>
34. </table>
效果如图 3‑24所示：
图3-24 Boostrap带边框的表格
3、带悬停效果的表格

为 <table> 添加 .table-hover 类，就可以为表格的数据行添加鼠标悬停效果。当鼠标经过数据行时，会为该行添加浅灰色背景。如：
1. <table class="table table-hover">
2. <thead>
3. <tr>
4. <th>#</th>
5. <th>First Name</th>
6. <th>Last Name</th>
7. <th>Username</th>
8. </tr>
9. </thead>
10. <tbody>
11. <tr>
12. <td>1</td>
13. <td>Mark</td>
14. <td>Otto</td>
15. <td>@mdo</td>
16. </tr>
17. <tr>
18. <td>2</td>
19. <td>Jacob</td>
20. <td>Thornton</td>
21. <td>@fat</td>
22. </tr>
23. <tr>
24. <td>3</td>
25. <td colspan="2">Larry the Bird</td>
26. <td>@twitter</td>
27. </tr>
28. </tbody>
29. </table>
效果如图 3‑25所示：
图3-25 Boostrap带悬停修改的表格
4、紧凑的表格

为 <table> 添加 .table-condensed 类，所有单元格的 padding 都会减半（从8px减到4px），让表格更加紧凑。这种样式适合信息密集的情况。如：
1. <table class="table table-condensed">
2. <thead>
3. <tr>
4. <th>#</th>
5. <th>First Name</th>
6. <th>Last Name</th>
7. <th>Username</th>
8. </tr>
9. </thead>
10. <tbody>
11. <tr>
12. <td>1</td>
13. <td>Mark</td>
14. <td>Otto</td>
15. <td>@mdo</td>
16. </tr>
17. <tr>
18. <td>2</td>
19. <td>Jacob</td>
20. <td>Thornton</td>
21. <td>@fat</td>
22. </tr>
23. <tr>
24. <td>3</td>
25. <td colspan="2">Larry the Bird</td>
26. <td>@twitter</td>
27. </tr>
28. </tbody>
29. </table>
效果如图 3‑26所示：
图3-26 Boostrap紧凑的表格

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
收起
展开全文
EXCEL如何根据内容自动调整表格尺寸?
千次阅读 2021-07-27 07:17:16

三、然后，即可看到所有的内容都被选中。四、然后，在全选表格的情况下将表格的列宽，通过拖动调整成统一。2019-10-09阅读(102)主料白菜1颗牛腩肉1块辅料生姜葱蒜辣椒干生抽1勺白糖少许盐少许白菜烧牛肉的做法步骤1....

收起
python识别图片表格内容
千次阅读 2021-12-09 13:50:13

用opencv来识别表格中的直线，用pyteressact来识别单元格文字，用numpy做数值处理；

收起

python opencv 图像识别
[表格扫描OCR]快速扫描识别并获取表格图片内容[免费]
万次阅读 2020-04-27 23:36:59

也许一开始我们仅仅是想知道表格里面的内容就可以了，但当我们拿到表格以后可能我们就会有更高的要求了，我们也许想把这个表格也打印出来。但又不想打印那个歪歪扭扭的表格贴在床头或者墙上。那么我们就会想到OCR...

收起
iview可编辑表格表格行添加输入框、选择器
千次阅读 2020-07-02 15:30:23

iview可编辑表格表格行添加输入框、选择器表格的列定义中，在需要编辑的字段下使用render函数 Input输入框 { title: '控制器名称', key: 'conName', align: 'center', render: (h, params) => { ...

收起

vue.js
LABVIEW 表格中可输入颜色框_下拉框_选择框
热门讨论 2011-11-20 12:28:04

用自定义控件代替Labview自带的表格控件。可以自由指定单个或整行变换背景颜色和控件类型。（可以设成文本框，_下拉框_选择框）

收起

Labview LABVIEW
word表格怎么首行缩进 word表格内容缩进
千次阅读 2020-12-30 23:17:38

用Word做表格，表格里的文字首行怎么缩进呢？选中文本，右键选择段落。在特殊格式选择首行缩进。度量值选额2字符即可。word文档的首行缩进怎么设置？可以在Word的段落里面进行设置，选择首行缩进即可，以Word2016为...

收起
Cat-Table-Select 基于Vue+Element的表格选择器
千次阅读 2020-08-24 15:48:31

Cat-Table-Select 基于Vue+Element的表格选择器基于 Element 的Vue 组件(Vue.js 2.x) cat-table-select Github 地址前言之前自己动手做了个基于Element树选择器 cat-tree-selec ，于是就照着之前的思路又封装...

收起

vue javascript element
html中表格整体居中详解html里面如何让表格居中
千次阅读 2021-06-11 10:22:43

在这个无谓的年华，无论别人多么高高不可攀比，但小编还是选择，做一个适应自己的人。首先打开vscode编辑器，新建一个html文档，里面写入一个外层的div，再加入一行table表格：知道谢每一粒种子，每一缕清风，也...

收起
element ui可编辑表格
千次阅读 2022-01-20 14:54:23

elementui 可编辑删除表格表单中包涵表格校验需要触发表单，而表格需要时数组。因此表单绑定的是一个对象，表格中绑定的是该对象中的数组。 prop动态绑定。 <el-form :model="form" ref="form" :rules=...

收起

elementui vue.js
iview实现表格可编辑
千次阅读 2020-09-11 20:06:19

iview要实现table可编辑，使用render函数进行渲染，非常简单,希望对大家有所帮助。一、效果图如下：二、render函数使用方法 h: vue Render函数的别名（全名 createElement）即 Render函数 params： table 该行...

收起

vue.js javascript
Blog: 用element-ui表格实现可在表格内编辑，修改数据
千次阅读 多人点赞 2020-06-16 23:10:01

实现效果如下：更改完数据也改变了 <template> <el-table :data="tableData" @cell-dblclick="handle" style="width: 100%">...el-table-column prop="date" label="日期" width="180">...

收起

vue vue.js
iview中table表格中添加选择组件，可编辑表格，日期组件，超链接组件
千次阅读 2019-09-28 21:53:44

这篇文章主要介绍了iview的table组件中使用选择框，日期，可编辑表格，超链接等组件。 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组，如果该数组是异步动态生成的该组件不能正常渲染...

收起

iview table select date link
element-ui表格动态选择显示的列
千次阅读 2019-11-05 15:30:04

<el-table-column :key="col.prop" v-for="col in cols" :prop="col.prop" :label="col.label"></el-table-column> 添加一列 ...export default { ...vue使用element-ui，表格动态添加选择显示的列

收起

vue element-ui
excel表格怎么将相同内容筛选出来
千次阅读 2020-12-30 07:29:14

1excel表格怎么将相同内容筛选出来在一张EXCEL表格中,有两列不同且数量众多的的文字,如何快速又简便挑出两列当中相同的文字.，接下来举例简单的例子告诉大家Excel表格筛选相同名字的方法，希望能帮到大家。Excel表格...

收起
使用easyui的可编辑数据表格(editable datagrid)
万次阅读 2018-07-18 11:49:35

相关的参考属性、方法和事件： 1、列属性： 2、datagrid事件： 3、datagrid方法： 4、示范代码： <table id="myTable"></table&... var rowNu...

收起

esayui
Qt 设置QTableWidget表格不可被选中、不可编辑
万次阅读 2020-06-02 16:40:08

一、设置表格不可被选中 tableWidget->setSelectionMode(QAbstractItemView::NoSelection); 其它枚举值： QAbstractItemView::ExtendedSelection 选中多个目标 QAbstractItemView::SingleSelection 选中单个...

收起

qt
将excel文件中的内容转换成word文本（去表格）
千次阅读 2019-07-08 22:50:37

将excel文件中的内容转换成word文本（去表格）导语：因为最近的工作需要将excel表格中的一部分内容去掉表格框转换成word文本放到另一个word文档，所以操作就是需要去表格转换成word文本。因此我本人在上网搜了相关...

收起
element-ui tree树形组件自定义实现可展开选择表格
千次阅读 2019-02-02 14:56:00

最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图: 使用表格的方式也可以勉强实现效果,但是在判断选择时,自己要在处理一下数据,感觉不太好,就找了找element的其他组件.发现了tree树形...

收起
excel两列数据对比找不同_快速找出Excel表格中两列数据不同内容的3种方法！
千次阅读 2020-11-18 10:51:00

近日有粉丝在后台咨询小雨，问如何快速找出Excel表格中两列数据中的不同内容。如果数据量少的话，仔细找一找就可以看到了。如果数据量庞大的话，仅凭肉眼就无法准确高效的完成这个工作了。接下来，小雨以下图所示的...

收起
电脑excel表格中无法将复制的内容粘贴进去如何解决
千次阅读 2021-07-27 02:42:09

电脑excel表格中无法将复制的内容粘贴进去如何解决腾讯视频/爱奇艺/优酷/外卖充值4折起如果我们不能在表格中粘贴内容的话，应该是该表格被保护了，今天小编就告诉大家电脑excel表格中无法将复制的内容粘贴进去如何...

收起
在WPS文档的表格里面怎么让文字上下居中
千次阅读 2020-12-28 19:25:05

方法一：(1)选中需要调整的文字或单元格-----右键-----单元格对齐方式----此命令的下一级菜单中共有九e68a8462616964757a686964616f31333365653137个命令，然后选择中间那个示意图(上下左右居中)(一般是选第二行中间...

收起
HTML中的表格以及对表格样式的处理
千次阅读 2021-08-28 23:48:25

本篇文章将来学习HTML中的表格以及使用CSS对表格样式的处理，本篇文章包含的内容如下图所示：什么是表格在现实生活中，表格是一种比较常见的形式，例如报名表、简历等。在HTML页面中也提供了表格相关的一组元素来...

收起

html css
elementUI的表格多选功能之规定禁止选择
千次阅读 2021-06-07 11:17:19

在进行表格的多选的时候我们会碰到那种，只允许部分内容可以被选择，不符合的要禁用多选框，这个时候就要用到elementUI el-table的selectable 所以我们可以这样写 <el-table :data="tableData" border v-loading...

收起
vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格
万次阅读 多人点赞 2019-05-29 10:26:13

根据后台返回的属性名和字段动态生成可变表格element表格使用插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释...

收起
excel表格如何调整表格大小
千次阅读 2021-07-27 07:18:36

1.首先，来看一下表格默认的行高和列宽。2.然后点击表格左上角的三角符号e69da5e6ba903231313335323631343130323136353331333366303065全选中所有单元格。3.来到”开始“菜单这里。4.在开始菜单下找到”格式“这个...

收起
element-ui 中 table表格内容显示滚动条（一）
千次阅读 2020-03-24 15:14:31

固定element-ui中table的表头，纵向内容过多时，可选择固定表头。只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。必须要在el-table 元素里面设置 height=“250” （高度...

收起

vue.js

1 2 3 4 5 ... 20

收藏数 334,816

精华内容 133,926

热门标签

关键字：

如何让表格内容可选择