vue+element表格随笔

1、实现功能：表格选中，顶部tag展示；tag关闭，表格取消选中

<template>
  <div>
    <el-card shadow="never" :style="{height: '150px'}" class="mb-10">
      <p class="mb-10">选中的值</p>
      <el-tag class="ml-10 mb-10" v-for="tag in multipleSelection" :key="tag.name" closable :type="tag.type" @close="handleClose(tag)">
        {
    
    {
    
    tag.workName}}
      </el-tag>
    </el-card>
    <!--表格-->
    <el-card shadow="never" :style="{height: '850px'}">
      <el-table :data="tableData.dataList" border stripe  :header-cell-style="{background:'#E7F0FA',color: '#333'}"
                  :row-style="{height: '41px'}" :cell-style="{padding: '0'}" ref="table"
                @selection-change="handleSelectionChange">
        <span v-for="(item, index) in column" :key="index">
          <!--          多选-->
          <el-table-column align="center" fixed="left" type="selection" width="55" v-if="item.type === 'selection'" :reserve-selection="true"></el-table-column>
          <!--       文字-->
          <el-table-column align="center" :width="item.width?item.width:''" :prop="item.prop" :label="item.label"  v-if="item.type === 'input'"></el-table-column>
        </span>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.pageNo"
                     :page-sizes="[20, 50, 100, 200]" :page-size="tableData.pageSize" align="right" class="mt-20"
                     layout="total, sizes, prev, pager, next, jumper" :total="tableData.dataSize">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  import {
    
     mapGetters } from 'vuex';
  export default {
    
    
    name: "work-manager",
    data() {
    
    
      return {
    
    
        column:[{
    
    
          prop: 'checkAll',
          label: '全选',
          type: 'selection',
        },{
    
    
          prop: 'companyTypeName',
          label: '单位类型',
          type: 'input',
        },{
    
    
          prop: 'workName',
          label: '工作内容',
          type: 'input',
        },{
    
    
          prop: 'companyUc',
          label: '单位编码',
          type: 'input',
        },{
    
    
          prop: 'companyName',
          label: '单位',
          type: 'input',
        },{
    
    
          prop: 'workStatusName',
          label: '工作状态',
          type: 'input',
        }],
        tableData:{
    
    
          dataList:[{
    
    
            companyTypeName: '1',
            workName: '2',
            companyUc: '3',
            companyName: '4',
            workStatusName: '5',
          },{
    
    
            companyTypeName: '11',
            workName: '22',
            companyUc: '33',
            companyName: '44',
            workStatusName: '55',
          },{
    
    
            companyTypeName: '112',
            workName: '222',
            companyUc: '332',
            companyName: '442',
            workStatusName: '552',
          },{
    
    
            companyTypeName: '113',
            workName: '223',
            companyUc: '333',
            companyName: '443',
            workStatusName: '553',
          }]
        },
        pageSize: 5,
        pageNo: 1,
        // 用来保存当前的选中
        multipleSelection: [],
      };
    },
    mounted() {
    
    
    },
    methods: {
    
    
      // 每页条数
      handleSizeChange(val) {
    
    
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
    
    
        this.pageNo = val;
        this.getList();
      },
      handleSelectionChange(rows) {
    
    
        this.multipleSelection = rows; // 选中的值
      },
      // 关闭标签
      handleClose(tag) {
    
    
        this.multipleSelection.splice(this.multipleSelection.indexOf(tag), 1);
        this.$refs.table.toggleRowSelection(tag, false);
      },
    }
  }
</script>

<style scoped></style>