封装可以隐藏冻结的列表-Toy模板网

这篇具有很好参考价值的文章主要介绍了封装可以隐藏冻结的列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-table表格改造封装

实现可以隐藏、冻结、以及排序

先封装一个组件


<template>
  <div>
    <el-popover placement="right" trigger="click">
      <el-table :data="columns">
        <el-table-column width="100" prop="title" label="列名">
        </el-table-column>
        <el-table-column width="80"  label="隐藏">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isHide"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column width="80" prop="address" label="冻结">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isFixed"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column width="80" label="排序">
          <template  slot-scope="scope">
            <el-checkbox v-model="scope.row.isSort"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
      <i class="el-icon-setting" slot="reference"></i>
    </el-popover>
    <el-table :data="tableData">
      <el-table-column
          v-for="col in columns"
          :key="col.prop"
          :prop="col.prop"
          :label="col.title"
          :width="col.width?col.width:''"
          :fixed="col.isFixed"
          :sortable="col.isSort"
          v-if="!col.isHide"
      />
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "test",
    props:['columns','tableData'],
    data(){
      return{
       
      }
    }
  }
</script>

<style scoped>

</style>

然后引用

<template>
  <div>
    <el-button @click="reset">重置</el-button>
    <tableV2 :columns="columns" :tableData="tableData"></tableV2>
  </div>
</template>

<script>
  import tableV2 from './tableV2.vue'
  export default {
    name: "test",
    components:{tableV2},
    data(){
      return{
        columns :[
          { key: 'name', prop: 'name', title: 'Name', width: 100,isFixed:true,isSort:false,isHide:false },
          { key: 'age', prop: 'age', title: 'Age',isFixed:false,isSort:false,isHide:false },
          { key: 'gender', prop: 'gender', title: 'Gender',isFixed:false,isSort:false,isHide:false },
          { key: 'tel', prop: 'tel', title: 'Tel', isFixed:false,isSort:true,isHide:false }
        ],
        tableData : [
          { name: '111', age: '22', gender: '33', tel: '55' },
          { name: '111', age: '12', gender: '33', tel: '35' },
          { name: '111', age: '42', gender: '33', tel: '25' },
          { name: '111', age: '52', gender: '33', tel: '15' },
          { name: '111', age: '21', gender: '33', tel: '55' },
        ]
      }
    },
    methods:{
      reset(){
        this.tableData.map((v,i)=>{
          v.age = Math.random()
        })
      },
    }
  }
</script>

文章来源地址https://www.toymoban.com/news/detail-832891.html

到了这里，关于封装可以隐藏冻结的列表的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！