el-table中常用用法的总结

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

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

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

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

代码如下：

//点击这一行，打印这条数据。
 


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

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

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

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

代码如下：

//勾选checkbox，打印这条数据。
 
       

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

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

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

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

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

 
        

 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，不用怕~

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

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

代码如下：

四 插槽的使用

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

代码如下：

4.2 整列的判断

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>