vue+antd——table组件实现动态列+表头下拉选择功能——技能提升

这篇具有很好参考价值的文章主要介绍了vue+antd——table组件实现动态列+表头下拉选择功能——技能提升。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Table 表格

展示行列数据。

何时使用

当有大量结构化的数据需要展现时;
当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

最近在写vue+antd的框架,遇到一个需求:就是要实现table表格的动态列,并且相应的表头要实现下拉选择的效果,最后点击保存时,要将下拉的内容拼接到对应的列上面去。

在Table中,dataSource和columns里的数据都需要指定key值。对于dataSource默认将每列数据的key作为唯一标识。
如果数据中没有这个属性,务必使用rowKey来指定数据列的主键。如果没有指定,控制台会出现缺少key的提示,表格组件也会出现各类奇怪的错误。

效果图

vue+antd——table组件实现动态列+表头下拉选择功能——技能提升,ant-design,vue基础知识,vue.js,javascript,前端
vue+antd——table组件实现动态列+表头下拉选择功能——技能提升,ant-design,vue基础知识,vue.js,javascript,前端

上面的[序号,物料名称,型号,品牌,封装,参数,位号,供料方式,单片用量,需求用量,类目,类别,SMT套数]都是固定列
动态列是上图中红框框住的部分

table组件实现动态列

先看数据结构:
vue+antd——table组件实现动态列+表头下拉选择功能——技能提升,ant-design,vue基础知识,vue.js,javascript,前端
要求:根据第一条数据中的noBelongCols字段,创建动态列。

1.tableList:table表格列表数据
2.noBelongCols:动态列参数,长度就是动态列的长度
3.noBelongTypes:表头的下拉列参数

changeColumns(){
	let noBelongCols =
        this.tableList && this.tableList[0] && this.tableList[0].noBelongCols;
      console.log('noBelongCols', noBelongCols, this.columns);
      this.noBelongCols = noBelongCols;
      this.noBelongTypes = [];
      noBelongCols &&
        noBelongCols.forEach((be, index) => {
          this.columns.push({
            slots: { title: '无主列' + index },
            type: 'string',
            dataIndex: '无主列' + index,
            width: 110,
            scopedSlots: { customRender: '无主列' + index },
          });
          this.noBelongTypes.push(undefined);
          this.tableList.forEach((table) => {
            table['无主列' + index] = table['noBelongCols'][index];
          });
        });
      this.columns.push({
        title: '操作',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width: 60,
        fixed: 'right',
      });
}

table组件表头自定义——slots: { title: ‘无主列’ + index }

由于动态列的长度不固定,因此需要用v-for进行遍历,遍历出多列。

 v-for="(be, bIndex) in noBelongCols" :key="bIndex" :slot="'无主列' + bIndex"
<a-table
  :rowKey="(r, i) => i.toString()"
  :columns="columns"
  :dataSource="tableList"
>
  <div
    v-for="(be, bIndex) in noBelongCols"
    :key="bIndex"
    :slot="'无主列' + bIndex"
  >
    <a-select v-model="noBelongTypes[bIndex]" style="width: 100px">
      <a-select-option
        v-for="item in titleOptions"
        :key="item"
        :value="item"
        >{{ item }}</a-select-option
      >
    </a-select>
  </div>
</a-table>

表格头部自定义的处理方法:

1.使用slots:{title:'无主列'}

自定义表头:slots:{title:'无主列'+index}
自定义表格内容:scopedSlots:{customRender:'无主列'+index}

遍历动态列的时候,设置自定义表头和自定义表格内容

this.columns.push({
  slots: { title: '无主列' + index },
  type: 'string',
  dataIndex: '无主列' + index,
  width: 110,
  scopedSlots: { customRender: '无主列' + index },
});
2.在table组件中使用slot='xxxx'的方式来处理

最终代码如下:

<div
  v-for="(be, bIndex) in noBelongCols"
  :key="bIndex"
  :slot="'无主列' + bIndex"
>
  <a-select v-model="noBelongTypes[bIndex]" style="width: 100px">
    <a-select-option
      v-for="item in titleOptions"
      :key="item"
      :value="item"
      >{{ item }}</a-select-option
    >
  </a-select>
</div>

完成!!!多多积累,多多收获!!!

下面内容与文章相关不大,只是为了凑字数,可忽略!!!

table组件,主要用于大量结构化的数据需要展现时使用,在各端应用开发中使用非常广泛,达到几乎必用的地步。在原生ios开发中,通常需要自定义cell来进行数据的展示,antd 的table组件功能相当强大,能实现的功能覆盖范围也相当广泛,本文只是简单介绍一下最基本的用法,有兴趣的可以直接去官网上看,示例更丰富,而且都带有效果展示。
首先,指定表格的数据源 dataSource 为一个数组:

在数据较多,会自动分页展示,每一列会根据内容的长度自动撑长,上手使用非常简单,通常PC上对表格会有一些编辑等操作,在原生ios中需要自己布局、定义方法等一系列操作,antd table则只需要在列名称中添加链接就好:

自定义andt table表格样式的方式也比较多,上述方法可能会引起全局改变,如果只是改变代码中一个table,则需要注意以下。以上只是介绍的最最最基础的用法,还有很多高级一些的方法大家可以去官网细看。

值得一提的是,表格的样式是默认的,需要修改的话要自己改变样式,可以参考以下方法:文章来源地址https://www.toymoban.com/news/detail-697977.html

.ant-table{
  :global {
    width: 98%;
    margin-left: 1%;
    .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
        padding: 6px 8px !important;
    }
    .ant-table-thead > tr > th {
        background-color: #242542;
        color: white;
    }
    .ant-table-thead > tr > th:hover {
        background-color: #535781;
    }
    .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
        background: rgb(201, 223, 11);
    }
    .ant-table-content { 
      background-color: #343655; 
      color: white;
     }
    .ant-table-tbody > tr:hover > td{
      background-color:rgba(106, 178, 245, 0.5) ! important;
     }
  }
}

到了这里,关于vue+antd——table组件实现动态列+表头下拉选择功能——技能提升的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于vue+element ui实现下拉表格选择组件

    根据https://lolicode.gitee.io/scui-doc/demo/#/dashboard里的组件修改

    2024年02月16日
    浏览(56)
  • react+antd,Table表头文字颜色设置

    1、创建一个自定义的TableHeaderCell组件,并设置其样式为红色 2、将CustomTableHeaderCell组件传递到Table组件的columns属性中的title属性中: 3、将数据源(dataSource)、列配置(columns)等相关信息传递给Table组件

    2024年01月18日
    浏览(58)
  • 【vue组件】使用element-ui 实现三级联动下拉选择

    实现的思路是第一个下拉选择在选择了选项后将该选项的信息传递到接口请求下一个选项的内容,依次类推 然后在清除了上一级选择的选项后要将其次级和子孙级的选项都清除(包括选择里的列表内容) 下面看具体代码: 效果图:

    2024年02月11日
    浏览(62)
  • Element+Vue实现动态表单(多个下拉框组件)

    表单的内容为巡检计划,巡检计划可以选择多个巡检点位,每个巡检点位可以选择多个设备和对应操作。 点击加号图标增加一个下拉框 减号图标删除对应下拉框 下拉框备选项目相同 点击设置动作按钮,弹出可编辑表格,可以为该巡检点位设置多个动作 表格每行内容可编 设

    2024年02月15日
    浏览(41)
  • react + antd:AutoComplete 实现既可以自由输入又能下拉选择

    在工作中遇到一个需求,既能下拉选择,有要求可以自由输入没有的选项。 刚开始考虑使用 Select 组件,发现只有多选( mode=\\\"tags\\\" )的时候才能随意输入内容,但多选又不符合当前的业务需求。 在犹豫要不要自定义一个组件来实现业务需求时,发现了 AutoComplete 组件,完美实

    2024年01月19日
    浏览(88)
  • vue+Element UI Table表格动态渲染表头内容及操作按钮

    循环表格头信息数组 封装操作组件并引入表格文件内 配置表头信息数组及添加操作事件

    2024年02月13日
    浏览(71)
  • antd的Table组件实现单元格可编辑

    目录  官网做法 其他做法 首先,官网文档上是有可编辑单元格和可编辑行的。我研究了好几遍,也是半知半解,只会用  官网做法 有一定的局限性,单元格内只能是输入框(我试了一些别的,不太行) 代码直接照着文档粘贴,只说一下需要改动的地方 table的数据源,我们都是

    2024年02月16日
    浏览(47)
  • vue2 - Antd Table组件的头部单元格 字体加粗, 文字内容居中 解决办法:

    问题:默认情况下,英文字体加粗,中文字体不加粗, 在当前.vue的style增加穿透antd table的表头样式,然后在使用table的外层设置加上class 分2种情况,单独设置表头,或者所有单元格都居中 单独设置表头:在设置列时,加上方法:customHeaderCell 所有单元格:在设置第一列时加

    2024年02月15日
    浏览(62)
  • 记录--组件库的 Table 组件表头表体是如何实现同步滚动?

    在使用 Vue 3 组件库 Naive UI 的数据表格组件 DataTable 时碰到的问题,NaiveUI 的数据表格组件 DataTable 在固定头部和列的示例中,在键盘操作下表格横向滚动会有问题,本文是记录下解决问题的过程,并最后向 Naive UI 提交 PR。 问题复现步骤: 鼠标点击表头,此时按键盘左右键,

    2024年02月12日
    浏览(44)
  • el-table 实现动态表头 静态内容 根据数据显示动态输入框

    直接放代码了

    2024年02月12日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包