table取tr对象 vue_vue + element UI <table>表格的常见的案例

一.table组件的方法,事件

二.常用的事件,属性

(一).属性

1.多选框(type = "selection") 需要实现勾选的功能

在 内加入

2. :data="tableData" 是table的数据绑定

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列是组件预留的。

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 '未知';

}

}

}

}

f1dd60cacfb5

image.png

4.selectable (row, index) 是否可以选中

注意:仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

使用:

export default {

methods: {

selectable(row, index){

if(index === 1){

return true;

}else{

return false;

}

}

}

}

只有第二条是可以选中 其他不能

f1dd60cacfb5

image.png

(二).方法

1.row-click 点击行事件

handleRowChange(row, event, column){ row此行的数据 }

2.selection-change 获取选中的所有值

selectionRowsChange(val){ val 选中的值}

f1dd60cacfb5

image.png

1.table tr 点击 复选框选中 再次点击 复选框取消选中

①设置一个全局函数

exports.install = function (Vue, options) {

//删除数组 指定的元素

Vue.prototype.removeByValue=function(arr, val){

for(var i=0; i

if(arr[i] == val) {

arr.splice(i, 1);

break;

}

}

};

};

②tableUser.vue

检索

重置

新增

编辑

删除

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

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

var arrIDsame=false;

valId.push(sels[i].id);

}

this.arrID=valId;

}

}

},

mounted() {

this.getUsers();

}

}

3.table行内编辑

vue slot的scope传递,要表述的意思组件中slot这个插槽上可以赋值各种属性,在调用组件的页面中可以使用 来获取插槽上的属性值,获取到的值是一个对象。

(1).一行一行编辑

{{scope.row.date}}

{{scope.row.name}}

{{ scope.row.address }}

保存

编辑

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'

})

}

}

}

f1dd60cacfb5

image.png

(2).table批量编辑列字段

保存

编辑

{{scope.row.date}}

{{scope.row.name}}

{{ scope.row.address }}

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;

}

}

}

f1dd60cacfb5

image.png

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

weixin_39818521

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值