欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Ant-design-vue Table組件customRow屬性的使用說明

 更新時(shí)間:2020年10月28日 10:51:44   作者:EasonGG  
這篇文章主要介紹了Ant-design-vue Table組件customRow屬性的使用說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

官網(wǎng)示例

使用方式

	// 表格中加入customRow屬性并綁定一個(gè)custom方法
	<a-table
	 rowKey="stockOrderCode"
	 :columns="columns"
	 :dataSource="dataSource"
	 :pagination="pagination"
	 :customRow="customRow"
	>
	</a-table>

	// methods中定義方法
	customRow(record, index) {
  return {
  // 這個(gè)style就是我自定義的屬性,也就是官方文檔中的props
  style: {
   // 字體顏色
   color: record.remarkDesc ? record.remarkDesc.fontColor : 'rgba(0, 0, 0, 0.65)',
   // 行背景色
   'background-color': record.remarkDesc ? record.remarkDesc.bgColor : '#ffffff',
   // 字體類型
   'font-family': record.remarkDesc ? record.remarkDesc.fontType : 'Microsoft YaHei',
   // 下劃線
   'text-decoration':
   record.remarkDesc && record.remarkDesc.underline ? 'underline' : 'unset',
   // 字體樣式-斜體
   'font-style': record.remarkDesc && record.remarkDesc.italics ? 'italic' : 'unset',
   // 字體樣式-斜體
   'font-weight': record.remarkDesc && record.remarkDesc.bold ? 'bolder' : 'unset',
  },
  on: {
   // 鼠標(biāo)單擊行
   click: event => {
   // do something
   },
  },
  }
 },

最終實(shí)現(xiàn)的效果

最終實(shí)現(xiàn)表格行樣式的自定義

補(bǔ)充知識(shí):ant-design-vue 中table行 綁定點(diǎn)擊事件

目前在學(xué)習(xí)使用antd中,需求雙擊表格行顯示pdf,在table中給customRow設(shè)置行屬性

 <a-table
  bordered
  :rowSelection="rowSelection"
  :columns="columns"
  :dataSource="data"
  rowKey="id"
  :customRow="Rowclick"
  :pagination="pagination"
  :scroll="{ y: 520 }"
  size="small"
 >
  <span slot="sex" slot-scope="sex">
  {{ sex == 1 ? "男" : sex == 0 ? "女" : "/" }}
  </span>
  <span slot="status" slot-scope="status">
  {{ status == 1 ? "已打印" : "未打印" }}
  </span>
 </a-table>

methods中

 Rowclick(record, index) {
  return {
  on: {
   click: () => {},
   dblclick: () => {
   console.log(record, index, 2222);
   this.showPdf = true;
   let url = "demo.pdf";
   this.pSrc = "/static/pdf/web/viewer.html?file=" + url;
   // window.open("/static/pdf/web/viewer.html?file=" + url);
   }
  }
  };
 },

以上這篇Ant-design-vue Table組件customRow屬性的使用說明就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】

    vue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】

    下面小編就為大家?guī)硪黄獀ue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】。小編覺得挺不錯(cuò)的,現(xiàn)在就想給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue3如何用pinia替代vuex

    vue3如何用pinia替代vuex

    這篇文章主要介紹了vue3如何使用pinia替代vuex問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置

    vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置

    這篇文章主要介紹了vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 詳解Vue slot插槽

    詳解Vue slot插槽

    這篇文章主要為大家介紹了Vue的slot插槽,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法

    vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法

    今天小編就為大家分享一篇vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue響應(yīng)式原理詳解

    Vue響應(yīng)式原理詳解

    本篇文章主要介紹了Vue響應(yīng)式原理詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-04-04
  • vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例(附demo)

    vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例(附demo)

    本文主要介紹了vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue實(shí)現(xiàn)圖片平鋪方式

    vue實(shí)現(xiàn)圖片平鋪方式

    在Vue中,實(shí)現(xiàn)圖片或組件的平鋪布局并允許用戶進(jìn)行修改,可以通過數(shù)據(jù)綁定、模板編寫與交互設(shè)計(jì)來實(shí)現(xiàn)圖片平鋪,使用v-for指令和動(dòng)態(tài)組件,可以創(chuàng)建可編輯的組件平鋪布局,允許用戶通過點(diǎn)擊觸發(fā)編輯操作,通過外部編輯面板修改屬性后保存更改
    2024-10-10
  • 在 vue-cli v3.0 中使用 SCSS/SASS的方法

    在 vue-cli v3.0 中使用 SCSS/SASS的方法

    關(guān)于如何在 vue-cli v3.0 中使用 SCSS/SASS,這里提供三種方案。感興趣的朋友通過本文一起學(xué)習(xí)吧
    2018-06-06
  • vue導(dǎo)出報(bào)表至excel表格三種方式

    vue導(dǎo)出報(bào)表至excel表格三種方式

    這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出報(bào)表至excel表格的三種方式,導(dǎo)出報(bào)表是實(shí)際開發(fā)的常見功能,前后端都可以實(shí)現(xiàn)表格導(dǎo)出,本文介紹的是用vue實(shí)現(xiàn),需要的朋友可以參考下
    2023-09-09

最新評(píng)論