Element UI Table常用使用方法（header-cell-style；表头中的全选框取消；单选互斥功能；自动勾选toggleRowSelection方法）

Posted SAN822

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Element UI Table常用使用方法（header-cell-style；表头中的全选框取消；单选互斥功能；自动勾选toggleRowSelection方法）相关的知识，希望对你有一定的参考价值。

1.header-cell-style使用方法

header-cell-style方法是改变表格头部样式的内置属性，可以配置表头的样式

:header-cell-style=" background: '#f3f6fd', color: '#555' "

2.表格的type="selection"的使用方法,将表头中的全选框取消

 <el-table-column type="selection"> </el-table-column>

当el-table增加改属性后会增加全选功能,需求是将表头中的全选框取消，下面的css代码需要放在App.vue中。在组件的style中不生效

.el-table__header .el-table-column--selection 
  visibility: hidden;
  background: red !important;
  z-index: 99999;

.el-table__header-wrapper 
  background: #f3f6fd;

li 
  list-style: none;

3.type="selection"属性，单选互斥功能

当设置type="selection"属性时，ui默认是可以多选的，需求是table单选，

		<el-table
          ref="multipleTable"
          :data="tableData"
          @selection-change="selectionChange"
          @select="select"
          tooltip-effect="dark"
          style="width:100%;height:80%;overflow: auto;"
          :header-cell-style=" background: '#f3f6fd', color: '#555' "
        >

当表格要实现互斥单选功能是,需要使用内置的selection-change和select事件前者为：当选择项发生变化时会触发该事件；后者为:当用户手动勾选数据行的 Checkbox 时触发的事件

 select(selection, row) 
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row,true);
    ,
    // 表格的选中 可以获得当前选中的数据
    selectionChange(val) 
      // 将选中的数据存储起来
      console.log(val)
      //这里输出的数组当第一次选择的时候数组为一项，当多次选择之后数组中为两项，其中第二项为选中的值
      //这里可以根据输出的值的数组长度来拿到最新选择的值
    ,

4.table表格页面渲染完成自动勾选toggleRowSelection使用

toggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

 toggleSelection(rows) 
        if (rows) 
          rows.forEach(row => 
            this.$refs.multipleTable.toggleRowSelection(this.tableData.find(v=>v.scenario_id==row.scenario_id),true);
          );
         else 
          this.$refs.multipleTable.clearSelection();
        
      ,

在表格渲染的请求方法的回调中 使用

当做了单选操作存储的数组只有一项时


    let rows=JSON.parse(window.sessionStorage.getItem("sceneTion"))
      if(rows!=null)
        this.datarows.push(rows)
           this.$nextTick(()=>
            this.toggleSelection(this.datarows)
          )

当没有做互斥单选操作，此时需要在请求到的数组中拿出勾选的数组this.tableData.filter过滤拿到的是available==ture表示被勾选状态

   let rows= this.tableData.filter(v=>v.available==true)
        //   if()
      if(rows!=null)
          this.datarows=rows
           this.$nextTick(()=>
            this.toggleSelection(this.datarows)
          )

this.$nextTick表示在页面渲染完成时执行，如果不用在页面加载完成时效果不生效。

5.判断用户勾选还是取消勾选

el-table标签中加入select事件

 @select="handleSelectionChange"

      //勾选
         handleSelectionChange(rows, row) 
            let selected = rows.length && rows.indexOf(row) !== -1
            // console.log(selected)  // true就是选中，0或者false是取消选中
            ,

vue + element ui table表格二次封装 常用功能

因为在做后台管理项目的时候用到了大量的表格， 且功能大多相同，因此封装了一些常用的功能， 方便多次复用。

组件封装代码：

<template>
  <el-table :data="tableData" size="medium"
            ref="multipleTable" border fit
            @sort-change="handleSort"
            @filter-change="filterHandler"
            @selection-change="handleSelectionChange">
    <!-- 多选框 -->
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column v-for="(th, key) in tableHeader"
                     min-height="46"
                     :key="key"
                     :prop="th.prop"
                     :label="th.label"
                     :fixed="th.fixed"
                     :sortable="th.custom?‘custom‘:false"
                     :filters="th.filters"
                     :column-key="th.columnKey"
                     :filtered-value="th.filteredValue"
                     :filter-multiple="th.filterMultiple"
                     :min-width="th.minWidth" align="center">
      <template slot-scope="scope">
        <!-- 操作按钮 -->
        <div v-if="th.operation">
          <el-button v-for="(o, key) in th.operation" :key="key"
                     @click="o.clickFun(scope.row)"
                     style="width:100%"
                     type="text" size="mini">
            {{o.name}}
　　　　　　</el-button>
        </div>
        <!-- 点击跳转页面 -->
        <div v-else-if="th.router">
          <router-link :to="{path: th.router.path, query: {expertFields: scope.row[‘fieldName‘]}}">{{scope.row[th.prop]}}</router-link>
        </div>
        <div v-else>
          <!-- 鼠标滑过显示气泡框 -->
          <el-popover v-if="th.describe"
                      popper-class="popover-el-class"
                      placement="bottom"
                      width="200"
                      trigger="hover"
                      :content="scope.row[th.prop]">
            <span class="describe-wrap" slot="reference" style="-webkit-box-orient:vertical">{{ scope.row[th.prop] }}</span>
          </el-popover>
          <!-- 下拉选择框 -->
          <el-select v-else-if="th.selected" :disabled="!th.disabled" v-model="scope.row[th.prop]" @change="th.changeFunc" clearable>
            <el-option v-for="(item, index) in th.selected" :value="item.value" :label="item.text" :key="index"></el-option>
          </el-select>
          <!-- 纯展示数据 -->
          <span v-else-if="!th.formatData">{{ scope.row[th.prop] }}</span>
          <!-- 需要格式化的数据结构 -->
          <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    name: ‘comp-table‘,
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      tableHeader: {
        type: Array,
        default: function () {
          return []
        }
      },
      multipleSelection: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
　　filters: {　　
        formatters (val, format) {
          if (typeof (format) === ‘function‘) {
            return format(val)
          } else return val
        }
　　},
    methods: {
      handleSelectionChange (val) {
        this.$emit(‘update:multipleSelection‘, val)
      },
      handleSort (sort) {
        this.$emit(‘sort-events‘, sort)
      },
      filterHandler (filters) {
        this.$emit(‘filter-events‘, filters)
      }
    }
  }
</script>

页面内调用：

<comp-table :tableData="tableData"
        :tableHeader="tableHeader"
        :multipleSelection.sync="multipleSelection"
        @filter-events="filterEvents"
        @sort-events="sortEvents">
</comp-table>

<script>
export default {
    data () {
        return {
             tableData: [], // 请求到的表格数据
             tableHeader: [ // 表头信息
          　　　{ prop: ‘fieldName‘,
            　　label: ‘领域‘,
            　　filters: domainTypeData,
            　　columnKey: ‘fieldType‘,
            　　filterMultiple: false,
            　　minWidth: ‘150px‘,
           　　 fixed: true
          　　},
          　　{ prop: ‘fieidDetails‘, label: ‘详情‘, minWidth: ‘180px‘ },
          　　{ prop: ‘lawyerQuantity‘,
            　　label: ‘关联律师数量‘,
           　　 minWidth: ‘150px‘,
           　　 router: {path: ‘/‘}
         　　 },
          　　{ prop: ‘articlesNumber‘,
          　　  label: ‘相关文章数量‘,
            　　router: {path: ‘/case-management‘},
            　　minWidth: ‘150px‘
         　　 },
          　　{ prop: ‘operation‘,
            　　label: ‘相关服务‘,
            　　minWidth: ‘260px‘,
            　　style: {display: ‘block‘},
           　　 operation: [
              　　{name: ‘服务方案一‘, clickFun: this.getServiceOne},
              　　{name: ‘服务方案二‘, clickFun: this.getServiceTwo},
              　　{name: ‘服务方案三‘, clickFun: this.getServiceThird}
            　　]
          　　},
          　　{ prop: ‘gmtModified‘, custom: ‘custom‘, label: ‘最后更新时间‘, minWidth: ‘180px‘, formatData: this.formatDate },
          　　{ prop: ‘updater‘, label: ‘最后更新人‘, minWidth: ‘120px‘ },
          　　{ prop: ‘operation‘,
            　　label: ‘操作‘,
            　　minWidth: ‘260px‘,
           　　 operation: this.fieldStatus ? [
              　　{name: ‘上线‘, disabled: true, clickFun: this.onLineField},
              　　{name: ‘下线‘, underline: true, clickFun: this.underField}
           　　 ] : [
             　　 {name: ‘编辑‘, clickFun: this.editDomain},
              　　{name: ‘删除‘, clickFun: this.delField},
              　　{name: ‘待审核‘, clickFun: this.examineField}
            　　]
          　　}
       　　 ]   
        }
    }
}
</script>

 

以上是关于Element UI Table常用使用方法（header-cell-style；表头中的全选框取消；单选互斥功能；自动勾选toggleRowSelection方法）的主要内容，如果未能解决你的问题，请参考以下文章

element UI Table组件内el-dropdown 多参数传递

vue+element ui table组件封装,使用render渲染

Element UI Table常用使用方法（header-cell-style；表头中的全选框取消；单选互斥功能；自动勾选toggleRowSelection方法）

element-ui 怎么调用table内置的方法 toggleRowSelection

vue element-ui动态渲染多级table表头

Element UI table 顺序拖动