1. 程式人生 > >element-ui中table表頭新增元素(或者圖示)

element-ui中table表頭新增元素(或者圖示)

在這裡插入圖片描述
在這裡插入圖片描述

實現功能:element-ui table表頭開始單元格 新增元素。

直接上程式碼:

html

<el-table-column type="expand" width="64" label-class-name="use" >
	//...這裡面是其餘的程式碼
</el-table>

js

mounted(){
	this.setLabel();
},

setLabel() {
	let _this = this;
	this.$nextTick(() => {
		let cellDiv = document.getElementsByClassName('cell use')[0]
		cellDiv.setAttribute("style","cursor:pointer");
		let node = document.createElement('i')
		node.setAttribute('class', 'el-icon el-icon-arrow-right')
		node.setAttribute('is-expand', 'no'); //設定屬性is-expand的值
		node.onclick = function () {
			_this.cellDivClick.call(_this, node);
		}
		cellDiv.appendChild(node)
	})
},
cellDivClick(ele) {
	let state = ele.getAttribute('is-expand'); //獲取屬性is-expand的值
	//關閉的情況點選
	if (state === 'no') {
		//展開
		for(let i=0; i<this.systemInfoList.length; i++){
			this.expands.push(this.systemInfoList[i].systemId)
		}
		ele.setAttribute('class', 'el-icon el-icon-arrow-down')
		ele.setAttribute('is-expand', 'yes')
	} else if (state === 'yes') {
		//展開的情況點選關閉
		this.expands = [];
		ele.setAttribute('class', 'el-icon el-icon-arrow-right')
		ele.setAttribute('is-expand', 'no')
	}
},

總結 使用過directives 不好使,最後改成這種方式。雖然解決了,但是留有遺憾。因為指令不能成功實現。

相關推薦

element-uitable表頭新增元素或者圖示

實現功能:element-ui table表頭開始單元格 新增元素。 直接上程式碼: html <el-table-column type="expand" width="64" label-class-name="use" > //...這裡

vue element-uitable合計指定列求和

src 分享 .com bsp tab table http 合計 com 1 2 3效果圖 vue element-ui中table合計指定列求和

element-ui table表格hover 修改背景色

tab nbsp 級別 -- 表格 ron enable div ack 增加樣式級別就行啦 .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #212e3e !

實現element-uitable點選一行展開

轉:https://www.jianshu.com/p/e51ba4cb11d6 先上效果   效果圖 三要素 1、row-click 點選行 2、ref 自行了解vue 3

Element Uitable實現表格編輯效果

   主要以css實現 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: 100%;

element-uiTable表格省市區合併單元格

import axios from 'axios' export default { name: "city", data() { return { tableData: [], //table的資料 originalData: [],//

51Nod1024 矩陣不重複的元素等價代換

如果直接算a^b次方,資料肯定會溢位,所以可以等價代換。logN(a)=logN(b),說明a==b,所以a^b可以等價為log2(a^b)==log2(a^b),等價於a^b==a^b。log2(a^b)=b*log2(a)。結果再用set維護。 #include<iostream&

解決在BroadcastReceiver廣播接受者不能新增AlertDialog對話方塊的問題android.view.WindowManager$BadTokenException

在BroadcastReceiver,當我們建立一個AlertDialog並show出來的時候,出現了下面的錯誤: 12-24 14:10:57.025: E/AndroidRuntime(17600): java.lang.RuntimeException: Unable

vue2 + elementUI table表頭加複選框圖示

開發十年,就只剩下這套架構體系了! >>>   

Vue+Element UITable組建的每一行新增一個switch元件,實現每一行單獨控制

  最近在做公司的裝置管理系統,許可權管理中有一個需求需要展示如下: 每一行表格中的switch單獨控制一行; 實現效果的程式碼如下: <el-table :data="userRights" stripe border align="center" sty

Element ui 使用table組件實現分頁記憶選中

ids select microsoft 調用 tid 直接 ont LIDS 彈窗 我們再用vue和element-ui,或者其他的表格的時候,可能需要能記憶翻頁勾選,那麽實現以下幾個方法就ok了 首先定義個data值 data () { return {

查找element-uiel-table組件的行數

pre role 情況下 一行 名稱 查找 序號 cli current <el-table :data="roleData" border stripe highlight-current-row :height="a

一個類,有新增元素add和獲取元素數量size方法。 啟動兩個線程。線程1向容器新增數據。線程2監聽容器元素數量,當容器元素數量為5時,線程2輸出信息並終止

override tac trace add syn countdown print import 數據 方式一: /** * 兩個線程要是可見的所以要加上votalile */public class Test_01 { public static void

element-uitable元件-checkbox選中分頁記憶-邏輯修改成 選中row的id集合來記錄選中了那些資料 修訂後完整版

<template> <div style="margin-bottom: 20px;"> <el-dialog :title="edit_main_title" append-to-body v-dialogDrag :visible.sync="ed

vue element UI el-table 給表格新增複選框,並得到所選值

<el-table @selection-change="changeFun"> <el-table-column type="selection"> </el-table-column> </el-table>

【vue】element-ui 給el-table-column設定寬度百分比(%)以及插入自定義內容

    <el-table       :data="tableData"       style="width: 100%"       stripe= "true">       &

vue2.0 + element UI el-table 資料匯出Excel 。

vue2.0 + element UI 中 el-table 資料匯出Excel 1、 安裝相關依賴 主要是兩個依賴 npm install --save xlsx file-saver

vue+element-ui實現多層級複雜的維度根據資料自動生成的表頭

表頭主要複雜在:1,有三層,一層是大類,第二層是具體項,第三層是標準值/對比值2,首列和末尾列是一層3,整個表格的維度是根據資料的輸入自己生成,也就是動態的下面是在 vue + eleUI 中的解決方案:<el-table :data="tableData" borde

element ui有關對話方塊el-dialog關閉事件詳細教程

開發十年,就只剩下這套架構體系了! >>>   

element-uiupload組件如何傳遞文件及其他參數

根據 接收 define restful 傳值 all time missing 屬性 最近項目用到了vuethink,裏面集成了element-ui,之前一直用的是bootstrap框架,對js也是一知半解,然後也用過vue.js,但也是學的不通透的,然後就各種入坑。 下