vuejs+element UI table的常見的屬性及事件
一.table元件的方法，事件
二.常用的事件，屬性
(一).屬性
1.多選框（type = "selection"） 需要實現勾選的功能
在<el-table> 內加入<el-table-column type="selection" width="55"></el-table-column>
2. :data="tableData" 是table的資料繫結
<el-table :data="tableData">
export default {
data() {
return{
tableData: [],
}
}
} 3.formatter 用來格式化內容
對table的值進行處理。Function(row, column, cellValue, index){}
A.使用formatter需要注意以下幾點：
①無論formatter出何種形式，格式化出的DOM一定都是被包含在預設的div標籤內
②在寫formatter函式時要保證有值返回，否則單元格沒有內容可展示，所以if的時候別忘了else
③formatter函式不會作用在列屬性checkbox為true的單元格上，checkbox列是元件預留的。
B。檢視小demo
<template>
<el-table :data="tableData3" ref="multipleTable">
<el-table-column type="selection" width="55" ></el-table-column>
<el-table-column type="index" label="序號" width="60"></el-table-column>
<el-table-column prop="sex" label="性別" width="100" :formatter="formatSex"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="IsAudit" :formatter="formatterColumn" label="稽核狀態" ></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData3: [{
id:'1',
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄',
IsAudit:0,
sex:'1'
}, {
id:'2',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄',
IsAudit:1,
sex:'0'
}, {
id:'3',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄',
IsAudit:10,
sex:'-1'
}]
}
},
mounted() {
},
methods: {
formatSex: function (row, column, cellValue, index) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
//狀態改成漢字
formatterColumn(row, column) {
switch(row.IsAudit){
case 0:
return '未通過';
break;
case 1:
return '稽核通過';
break;
case 10:
return '待稽核';
break;
case 9:
return '草稿';
break;
default:
return '未知';
}
}
}
}
</script> 
4.selectable (row, index) 是否可以選中
注意：僅對 type=selection 的列有效，型別為 Function，Function 的返回值用來決定這一行的 CheckBox 是否可以勾選
使用：
<template>
<el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange">
<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
selectable(row, index){
if(index === 1){
return true;
}else{
return false;
}
}
}
}
</script> 只有第二條是可以選中 其他不能
(二).方法
1.row-click 點選行事件
<el-table @row-click="handleRowChange">
handleRowChange(row, event, column){ row此行的資料 }
2.selection-change 獲取選中的所有值
<el-table @selection-change="selectionRowsChange">
selectionRowsChange(val){ val 選中的值}
三.例項
2.簡單的增刪改
1.table tr 點選 複選框選中 再次點選 複選框取消選中
①設定一個全域性函式
exports.install = function (Vue, options) {
//刪除陣列 指定的元素
Vue.prototype.removeByValue=function(arr, val){
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
};
}; <!--使用者名稱 增刪改 基本操作-->
<template>
<section>
<!--工具條-->
<el-col :span="24" class="el-table_headtoolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters" class="userform" label-width="50px">
<el-form-item label="姓名" prop="name">
<el-input v-model="filters.name" placeholder="姓名" prefix-icon="el-icon-search"></el-input>
</el-form-item>
<el-form-item label="性別" prop="sex">
<el-select v-model="filters.sex" filterable placeholder="請選擇" prop="sex">
<el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-dropdown split-button type="primary" @click="btnSearch" trigger="click">
檢索
<el-dropdown-menu slot="dropdown" class="lyzbtn-group" trigger="click">
<el-dropdown-item @click.native="btnReset">重置</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary" @click="btnNew" trigger="click">
新增
<el-dropdown-menu slot="dropdown" trigger="click">
<el-dropdown-item @click.native="btnEdit">編輯</el-dropdown-item>
<el-dropdown-item @click.native="btnDelete">刪除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-form>
</el-col>
<!--列表-->
<el-table :data="users.slice((page-1)*pagesize,page*pagesize)" highlight-current-row v-loading="listLoading" style="width: 100%;" @selection-change="selsUserChange" class="userTableJs" @row-click="handleRowChange" ref="table">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column type="index" label="序號" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="sex" label="性別" width="100" :formatter="formatSex">
</el-table-column>
<el-table-column prop="age" label="年齡" width="100" >
</el-table-column>
<el-table-column prop="birth" label="生日" width="120">
</el-table-column>
<el-table-column prop="addr" label="地址" min-width="180">
</el-table-column>
</el-table>
<!--工具條-->
<el-col :span="24" class="el-table_footertoolbar">
<el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" :total="users.length" style="float:right;">
</el-pagination>
</el-col>
<!--新增介面-->
<el-dialog title="新增" :visible.sync="addFormVisible">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="addForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-radio-group v-model="addForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年齡">
<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="選擇日期" v-model="addForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="addForm.addr"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
<!--編輯介面-->
<el-dialog title="編輯" :visible.sync="editFormVisible">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年齡">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="選擇日期" v-model="editForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.addr"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
import util from '@/utils/index'//日期的操作
import { getUserListPage,batchRemoveUser,addUser,editUser} from '@/assets/api/api';//介面
export default {
data() {
return {
filters: {
name: ''
},
//性別
sexOptions:[
{value: '1',label: '男'},
{value: '0',label: '女'}
],
users: [],//表格資料
page: 1,//當前頁數
pagesize:10,//一頁顯示幾條
listLoading: false,
sels: [],//列表選中列
total: 0,
editFormVisible: false,//編輯介面是否顯示
editLoading: false,
editFormRules: {
name: [{ required: true, message: '請輸入姓名', trigger: 'blur' }],
birth: [{ type: 'date', required: true, message: '日期必須填寫', trigger: 'change' }]
},
//編輯介面資料
editForm: {
id:undefined,
name: '',
sex:-1,
age: 0,
birth:new Date(),
addr: ''
},
addFormVisible: false,//新增介面是否顯示
addLoading: false,
addFormRules: {
name: [{ required: true, message: '請輸入姓名', trigger: 'blur' },],
birth: [{ type: 'date', required: true, message: '日期必須填寫', trigger: 'change' }]
},
//新增介面資料
addForm: {
name: '',
sex: -1,
age: 0,
birth: new Date(),
addr: ''
},
arrID:[],
}
},
methods: {
//性別顯示轉換
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
//初始頁page、初始每頁資料數pagesize和資料data
handleSizeChange(size){
this.pagesize = size;
},
handleCurrentChange(val) {
this.page = val;
this.getUsers();
},
handleRowChange(row, event, column){
var same=false;
if(this.arrID.length > 0){
for(var i=0; i<this.arrID.length ;i++){
if(this.arrID[i]==row.id){
same=true;
this.removeByValue(this.arrID, row.id);
break;
}
}
if(same==true){
this.$refs.table.toggleRowSelection(row,false);
}else{
this.$refs.table.toggleRowSelection(row,true);
this.arrID.push(row.id);
}
}else{
this.$refs.table.toggleRowSelection(row,true);
this.arrID.push(row.id);
}
},
//獲取使用者列表
getUsers() {
let para = {
page: this.page,
name: this.filters.name,
sex: this.filters.sex
};
this.listLoading = true;
getUserListPage(para).then((res) => {
this.users = res.data.users;
this.total = res.data.total;
this.listLoading = false;
});
},
//檢索
btnSearch(){
console.log('檢索')
var searchParams = { name: this.filters.name, sex: this.filters.sex };
//searchUser(searchParams).then(data => {
//});
},
//重置
btnReset(){
this.resetForm(".userform");
},
//新增
btnNew(){
this.addFormVisible = true;
},
//編輯
btnEdit(){
var ids = this.sels.map(item => item.id);
if(ids =='' || ids.length >1){
this.$alert('請選擇一條要編輯的記錄', '提示', {
dangerouslyUseHTMLString: true
});
}else{
const obj={};
obj.id=this.sels.map(item => item.id).toString();
obj.name=this.sels.map(item => item.name).toString();
console.log(this.sels.map(item => item.sex).toString())
if(this.sels.map(item => item.sex).toString() == 1){
obj.sex=1;
}else if(this.sels.map(item => item.sex).toString() == 0){
obj.sex=0;
}else{
obj.sex=-1;
}
obj.age=this.sels.map(item => item.age).toString();
obj.birth=this.sels.map(item => item.birth).toString();
obj.addr=this.sels.map(item => item.addr).toString();
this.editFormVisible = true;
this.editForm = Object.assign({},obj);
}
},
//刪除
btnDelete(){
var ids = this.sels.map(item => item.id).toString();
if(ids ==''){
this.$alert('請選擇要刪除的記錄', '提示', {
dangerouslyUseHTMLString: true
});
}else{
this.$confirm('確認刪除選中記錄嗎？', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
//NProgress.start();
let para = { ids: ids };
batchRemoveUser(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
message: '刪除成功',
type: 'success'
});
this.getUsers();
});
}).catch(() => {
});
}
},
//編輯
editSubmit: function () {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('確認提交嗎？', '提示', {}).then(() => {
this.editLoading = true;
//NProgress.start();
let para = Object.assign({}, this.editForm);
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
editUser(para).then((res) => {
this.editLoading = false;
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.getUsers();
});
});
}
});
},
//新增
addSubmit: function () {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('確認提交嗎？', '提示', {}).then(() => {
this.addLoading = true;
//NProgress.start();
let para = Object.assign({}, this.addForm);
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
addUser(para).then((res) => {
this.addLoading = false;
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getUsers();
});
});
}
});
},
selsUserChange(sels) {
this.sels = sels;
if(sels.length>0){
var valId=[];
for(var i=0;i<sels.length;i++){
var arrIDsame=false;
valId.push(sels[i].id);
}
this.arrID=valId;
}
}
},
mounted() {
this.getUsers();
}
}
</script>3.table行內編輯
vue slot的scope傳遞，要表述的意思元件中slot這個插槽上可以賦值各種屬性，在呼叫元件的頁面中可以使用<template slot-scope="props"> 來獲取插槽上的屬性值，獲取到的值是一個物件。
(1).一行一行編輯
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<span>{{scope.row.date}}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input class="edit-input" size="small" v-model="scope.row.address"></el-input>
</template>
<span v-else>{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.$index, scope.row)" size="small" icon="el-icon-circle-check-outline">儲存</el-button>
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">編輯</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
id:'1',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄',
edit:false
}, {
id:'2',
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄',
edit:false
}, {
id:'3',
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄',
edit:false
}, {
id:'4',
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄',
edit:false
}]
}
},
methods: {
confirmEdit(index,row){
row.edit = false;
this.$message({
message: '該地址已經成功修改',
type: 'success'
})
}
}
}
</script>
(2).table批量編輯列欄位
<template>
<section>
<!--工具條-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-button v-if="editOk" type="success" @click="btnOk" size="small" icon="el-icon-circle-check-outline">儲存</el-button>
<el-button v-else="editOk" type="primary" @click="btnEdit" size="small" icon="el-icon-edit">編輯</el-button>
</el-col>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<span>{{scope.row.date}}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="scope">
<template v-if="editOk">
<el-input class="edit-input" size="small" v-model="scope.row.address"></el-input>
</template>
<span v-else>{{ scope.row.address }}</span>
</template>
</el-table-column>
</el-table>
</section>
</template>
<script>
export default {
data() {
return {
tableData: [{
id:'1',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄',
}, {
id:'2',
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄',
}, {
id:'3',
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄',
}, {
id:'4',
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄',
}],
editOk:false
}
},
methods: {
btnEdit(){
this.editOk=true;
},
btnOk(){
this.editOk=false;
}
}
}
</script>
相關推薦
vuejs+element UI table的常見的屬性及事件
一.table元件的方法，事件檢視官網二.常用的事件，屬性(一).屬性1.多選框（type = "selection"） 需要實現勾選的功能在<el-table> 內加入<el-table-column type="selection" width="55"
element-ui table
eth src else post blog 同時 format bubuko 模板 額，最近有點頻繁記錄。感覺遇到了很多的問題。然後不斷的查，不斷的嘗試修改。然後得到解決。還是記錄關於element-ui的使用。這次是關於表格的使用。 表格使用其實平時用的話也
串口通信屬性及事件解析
每一個 receive -h aid rec 結束 out soft 邏輯 RS-232串口，串口按位（bit）發送和接收字節。盡管比按字節（byte）的並行通信慢，但是串口可以在使用一根線發送數據的同時用另一根線接收數據。典型地，串口用於ASCII碼字符的傳輸
vue element ui table 過濾功能實現
Element UI程式碼 <template> <div> <el-table :data="tableData" style="width: 100%"> border`在這裡插入程式碼片` > &
vuejs+element UI 點選編輯表格某一行時獲取內容填入表單
handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); } 詳細教程： 1.首先，做一個表格，用於顯示資訊；程式碼如下：
element-ui table 行內編輯
EditRow.ts interface NoParamConstructor<T> { new(): T; } export default class EditRow<T> { origin: T = null copy: T =
element ui table元件自定義合計欄,後臺給的資料
合計的資料是後臺傳的，所以用table元件自定義一行用來合計 <el-table border fit v-
CSS樣式的常見屬性及值
常見樣式屬性及值 字型: font -family -size -style: normal(正常)|italic(傾斜)|oblique -weight: normal|bold(粗體) 如果組合起來編寫: font: style weight size
element-ui Table表格結合CheckBox實現單選效果
最近做專案遇到一個需求,需要實現一個表格的單選,由於專案使用的是element-ui.於是去看了表格的文件,確實有單選的方法,但是官方的單選是直接選中表格行,通過顏色來區分 看著效果不明顯,實際需要一個複選框可以選擇,效果圖如下 於是自己結合elem
element ui Table表格自定義列模板結合Dialog彈框 編輯表格每一行的內容
Table表格部分 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column label="日期
element-ui table表格內容相同自動合併
專案需求:第二列的內容如果相同,則合併單元格,並且序號也合併: 實現方法: 1.rowspan()方法在獲取資料之後呼叫 rowspan() { this.spanArr = [];//在data裡面定義 this.position = 0;
如何在element-ui table 取到對應的ID的最後一個對象
this data index == push ret gui state fault 來回切換3個狀態值如何得到對應ID的最後一個對象 var is_push = () => { for (var i = 0; i < this.form.FaultDev
vue element-ui table表格滾動載入
新增全域性註冊事件，用來監聽滾動事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap =
node npm vuejs element-ui安裝步驟
1.下載對應本機環境安裝 nodejs 預設NPM已經整合 https://nodejs.org/zh-cn/ 開啟cmd直接輸入測試是否安裝成功 node測試 node -v NP
Unity3D中Animation的常見屬性及方法
Unity3D中Animation的常見屬性及方法如下： Animation.Play播放 function Play (mode : PlayMode = PlayMode.StopSameLayer) : bool function Play (animation : string, mode :
Element-UI table排序問題
專案需求：選擇框與表格的排序列雙向繫結 選擇器： 表格 表頭行： <!-- 選擇器 --> <el-select v-model="metricValue" placeholder="請選擇"> <el-optio
springboot shiro和freemarker、vuejs/element-ui集成之控制按鈕權限完全參考手冊
red 功能 使用 marker nib vuejs book redis guid 本文主要考慮單點登錄場景，登錄由其他系統負責，業務子系統只使用shiro進行菜單和功能權限校驗，登錄信息通過token從redis取得，這樣登錄驗證和授權就相互解耦了。 用戶、角色、權限進
lumen+vuejs+element-ui+axios+ueditor跨域上傳單張圖片
首先採用了lumen作為後臺，提供api 前端採用了vuejs+element-ui+axios 編輯器採用了 ueditor 這裡說明的是ueditor的跨域上傳單張圖片 下面介紹的是ueditor的跨域上傳單張圖片的功能 vuejs的static原始
jQuery UI table tr 點選事件 背景藍色
jQuery UI 中的table，每個 tr 有單機事件，當點選某一個 tr 後，被點選 tr 背景色變藍，其他 tr 無背景色。 <table id="xxxGrid"></table> 遇到的問題：使用 js 或者 jQuery 動態新增的
vue使用element-ui 監聽使用回車鍵事件
因為element-ui 對input做了封裝，使用@keyup.enter="fn"觸發Enter鍵事件就不會觸發，解決：後面追加.native。@keyup.enter.native="submi