el-table中常用用法的总结

最新推荐文章于 2024-08-01 14:08:25 发布

Dormiveglia-flx

最新推荐文章于 2024-08-01 14:08:25 发布

阅读量9.3k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sugerfle/article/details/108910146

版权

呦，＜el-table＞不用怕~

转载自https://blog.csdn.net/gao_xu_520/article/details/80049254
站在巨人的肩膀上，不知道巨人朋友累不累

一给表格添加复选框(checkbox)

1.1 点击这一行，获取这一行的值

@row-click=“方法名” 。点击这一行触发的函数

代码如下：

//点击这一行，打印这条数据。
 <el-table :data="tableData3"  ref="multipleTable"  @row-click="handleRowChange">


methods:{
 handleRowChange(row, event, column){
     console.log(row)
   },
 }

1.2 勾选复选框，获取选中的值（数组）

第一步：type=“selection” ，添加checkbox。

第二步：@selection-change=“方法名” ，勾选复选框触发

代码如下：

//勾选checkbox，打印这条数据。
 <el-table :data="tableData3"  ref="multipleTable"  @selection-change="handleSelectChange">
       <el-table-column type="selection" width="55" ></el-table-column>

 handleSelectChange(val){
      console.log(val)
 },

1.3 点击这一行，自动勾选复选框，(再点击就取消勾选)获取选中所有值（数组）

第一步：type=“selection” ，添加checkbox。

第二步：@selection-change=“方法名” ，勾选复选框触发

第三步：@row-click=“方法名” ，点击这一行，通过监听复选框的勾选状态，来动态的获取数据，并赋值给数组。

 <el-table :data="tableData3"  ref="multipleTable"  @selection-change="handleSelectChange" @row-click="handleRowChange">
        <el-table-column type="selection" width="55" ></el-table-column>

 handleSelectChange(val){
    this.multipleSelection = val;
 },
 
 handleRowChange(row, event, column){
    this.$refs.multipleTable.toggleRowSelection(row);
 },

补充：this.$refs.multipleTable.toggleRowSelection(row);用于点击这一行的时候，控制勾选状态，当然可以加判断条件啦，各位攻城狮小朋友们自己查去吧。

二 formatter的使用

用法：:formatter=“方法名”
参数如下：Function(row, column, cellValue, index){}

呦，formatter，不用怕~

<template>
    <el-table :data="tableData3"  ref="multipleTable"  @selection-change="handleSelectChange" @row-click="handleRowChange">
        <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="地址">
            <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>
</template>
<script>
    export default {
        data() {
            return {
                tableData3: [{
                    id:'1',
                    date: '2020-10-01',
                    name: '奥力给',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:0,
                    sex:'1'
                }, {
                    id:'2',
                    date: '2020-10-01',
                    name: '小阿giao',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:1,
                    sex:'0'
                }, {
                    id:'3',
                    date: '2020-10-01',
                    name: '李狗蛋',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:10,
                    sex:'-1'
                },
             ],
                editOk:true,

            }
        },
        mounted() {
        },
        methods: {
            handleSelectChange(row){
              console.log(row)

            },
            handleRowChange(row, event, column){
                this.$refs.multipleTable.toggleRowSelection(row,true);
            },

            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>

在这里插入图片描述

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

注：仅对 type=selection 的列有效，即添加@select-change 方法以后。点击当前行数据，依然可以勾选，依然可以获取值，但是点击type=selection列的时候，会提示不能选中。

代码如下：

<template>
	<el-table :data="tableData3">
		<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>

四插槽的使用

template slot-scope=“props” 用于获取一个对象。
4.1 获取当前行对象：

代码如下：

  <el-table :data="tableData3"  ref="multipleTable"  @selection-change="handleSelectChange" @row-click="handleRowChange">
        <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">
            <template slot-scope="scope">
                <button v-if="scope.row.sex==1">男</button>
                <button v-if="scope.row.sex==0">女</button>
                <button v-if="scope.row.sex==-1">妖</button>
            </template>
        </el-table-column>
  </el-table>      
  
  <script>
    export default {
        data() {
            return {
                tableData3: [{
                    id:'1',
                    date: '2020-10-01',
                    name: '奥力给',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:0,
                    sex:'1'
                }, {
                    id:'2',
                    date: '2020-10-01',
                    name: '小阿giao',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:1,
                    sex:'0'
                }, {
                    id:'3',
                    date: '2020-10-01',
                    name: '李狗蛋',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:10,
                    sex:'-1'
                },
             ],
                editOk:true,

            }
        },
        methods: {

            handleSelectChange(row){
              console.log(row)

            },
            handleRowChange(row, event, column){
                this.$refs.multipleTable.toggleRowSelection(row);
            },

            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.2 整列的判断

<template>
    <el-table :data="tableData3"  ref="multipleTable"  @selection-change="handleSelectChange" @row-click="handleRowChange">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="name" label="姓名"></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>
</template>
<script>
    export default {
        data() {
            return {
                tableData3: [{
                    id:'1',
                    date: '2020-10-01',
                    name: '奥力给',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:0,
                    sex:'1'
                }, {
                    id:'2',
                    date: '2020-10-01',
                    name: '小阿giao',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:1,
                    sex:'0'
                }, {
                    id:'3',
                    date: '2020-10-01',
                    name: '李狗蛋',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:10,
                    sex:'-1'
                },
             ],
                editOk:true,

            }
        },
        mounted() {
        },
        methods: {

            handleSelectChange(row){
              console.log(row)

            },
            handleRowChange(row, event, column){
                this.$refs.multipleTable.toggleRowSelection(row);
            },
            
        }
    }
</script>

在这里插入图片描述
4.3 展开符的使用

<el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item  v-for="(item, index) in props.row.goodsCategoryList"  >
                                 <span> {{ item.attrName }}：{{ item.attrValue }}</span>
                          </el-form-item>

                    </el-form>
                </template>
            </el-table-column>