表格封装-某列可加链接、某列根据状态码变色

表格封装-某列可加链接、某列根据状态码变色

<template>
  <div>
    <el-table
      stripe
      :header-cell-style="{background: '#EDF1F5'}"
      :data='tableData'
      @selection-change="handleSelectionChange"
      >
      <!--多选列-->
      <el-table-column
        v-if='selectionShow'
        type="selection"
        width="50"
        align="center"
        highlight-current-row>
      </el-table-column>
      <!--主要内容部分-->
      <el-table-column
        v-for="(item, index) in tableHead"
        :header-align="item.headerAlign"
        :align="item.align"
        :key="index"
        :prop="item.prop"
        :label="item.label">
        <template slot-scope="scope">
        <!-- 判断某一列是否需要加a标签链接跳转-->
          <div v-if="item.hasHref==true"><a :href="item.href" style="color:#66b1ff">{{scope.row[item.prop]}}</a>
          </div>
           <!-- 判断某一列状态码需要改变颜色-->
          <div v-else-if="item.prop=='statusText'">
            <span v-if="scope.row.status==1" style="color:#67C23A">{{scope.row[item.prop]}}</span>
            <span v-else style="color:#F56C6C">{{scope.row[item.prop]}}</span>
          </div>
          <!-- 其他列-->
          <div v-else>{{scope.row[item.prop]}} 000{{scope.row.status}}</div>
        </template>
      </el-table-column>
      <!--操作列-->
      <el-table-column
        align="center"
        v-if="buttonListShow"
        :fixed="addBtnList.fixed"
        :label=addBtnList.label
        :min-width="addBtnList.width">
        <template slot-scope="scope">
          <el-button
            v-for="(item,index) in addBtnList.list"
            :key="index"
            v-show="exchangeBtn(item.showBtn,scope)"
            @click="clkCall(item.methods,scope)"
            type="text"
            size="small" :title="item.title">
            <span>{{item.title}}</span>
          </el-button>
          <el-button  type="text" size="small" @click="delData(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="pagebox">
      <div class="pagelist" v-if="pageShow">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :layout="pgconfig.layout"
          :background="pgconfig.background"
          :disabled="pgconfig.disabled"
          :hide-on-single-page="pgconfig.hideSingle"
          :popper-class="pgconfig.popperClass"
          :prev-text="pgconfig.prevText"
          :next-text="pgconfig.nextText"
          :current-page="pgconfig.currentPage"
          :page-sizes="pgconfig.pageSizes"
          :page-size="pgconfig.pageSize"
          :total="pgconfig.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    selectionShow: Boolean, // 是否显示多选列
    indexLabel: null, // 排序列名称
    indexWidth: null, // 排序列宽度
    tableHead: Array,  // 表头数据
    tableData: Array, // 表格数据
    addBtnList: null,  // 操作列配置项
    buttonListShow: Boolean,   // 是否显示操作列
    pageShow: Boolean,
    pgconfig: null,   // 分页

  },
  data(){
    return{

    }
  },
  watch: {
    // 监听表格数据
    tableData: {
      handler(val, oldVal) {
        this.tableData= val
      }
    },
    // 监听表头数据
    tableHead: {
      handler(val, oldVal) {
        this.tableHead= val
      }
    }
  },
  mounted(){
    //this.initData()
  },
  methods:{
    // 全选
    handleSelectionChange(val) {
      this.SelectCurrentData = val
      this.$emit('handleSelectionChange', val)
    },
    // 判断操作列按钮显示、隐藏
    exchangeBtn(itemshowBtn,scope){
      if(eval(itemshowBtn)){
        return true
      }
    },
    // 操作列 按钮方法
    clkCall(methodsWords,scope) {
      let el = event.currentTarget;
      this.$emit('clkCallBk', methodsWords,scope,el)
      // console.log(el)
    },
    // 删除方法
    delData(){
      console.log('删除')
      this.$confirm('确定删除此数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        });
      });
    },
    // 分页
    handleSizeChange(pageSize) {
      this.$emit("getPagesize", pageSize)
      this.$emit('fatherMethod') // 调用父页面方法请求后台数据
      this.pgconfig.pageSize = pageSize;    //动态改变
    },
    handleCurrentChange(currentPage) {
      this.$emit("getCurrentpage", currentPage)
      this.$emit('fatherMethod') // 调用父页面方法请求后台数据
      this.pgconfig.currentPage = currentPage;    //动态改变
    },
  }

}
</script>
<style scoped>
.pagebox {
  padding:50px 0 20px 0;
  clear: both;
  background:#fff;
  text-align: right;
}
.pagelist {
  display: inline-block;

}
</style>

表格组件使用DEMO

<template>
  <el-card :body-style="screenHeight" style="margin:10px;text-align:left;padding:10px!important">
    <el-row :gutter="24">
      <new-table
        :tableData="tableData"
        :tableHead="tableHead"
        :selectionShow=true
        :indexShow=true
        indexLabel="序号"
        indexWidth="50"
        :buttonListShow=true
        :addBtnList="addBtnList"
        :pageShow=true
        :pgconfig="pgconfig"
        @clkCallBk="listenCall"
        @handleSelectionChange="handleSelectionChange">
      </new-table>
    </el-row>
  </el-card>
</template>
<script>
import newTable from '@comm/components/lcdp/table'
export default {
  components:{
    newTable
  },
  data() {
    return {
      // 表头数据
      tableHead: [
        {
          width: 150,
          label: '日期',
          prop: 'date',
          align: 'center',   // 列对齐方式
          headerAlign: 'center',   // 列头对其方式

        },
        {
          width: 150,
          label: '姓名',
          prop: 'name',
          align: 'center',
          headerAlign: 'center',
          hasHref:true, // 是否加链接
          href:'javascript:void(0)',
        },
        {
          width: 100,
          label: '状态',
          prop: 'statusText',
          align: 'center',
          headerAlign: 'center',
        },
      ],
      // 表格基础数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          status: 1,
          statusText:'已同步'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          status: 0,
          statusText:'未同步'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          status: 0,
          statusText:'未同步'
        },
      ],
      buttonListShow: true,  // 是否显示操作列
      // 操作列数据
      addBtnList: {
        label: '操作',
        width: 120,
        list: [
          {
            title: '查看',
            icon: 'el-icon-circle-plus-outline',
            methods: 'check',  // 按钮方法
            showBtn: true  // 是否显示按钮
          },
          {
            title: '编辑',
            icon: 'el-icon-edit',
            methods: 'edit',
            showBtn: true
          },
        ]
      },
      // 全选数据
      multipleSelection:null,
      // 分页
      pgconfig:{
        //以下参数为分页控件配置属性
        layout:'total,prev,pager,next,sizes,slot',
        background:true,
        disabled:false,
        hideSingle:false,   // 当只有一页时是否隐藏分页
        pageSizes: [20,50,100,200],
        //以下三个参数应由查询结果返回
        total: 100,
        pageSize:20,
        currentPage: 1,
      },
    }
  },
  methods:{
    // 表格全选
    handleSelectionChange(val) {
      console.log(this.multipleSelection = val)
      // alert('我是多选方法')
    },
    // 操作列按钮方法
    listenCall(methodsWords,scope,el) {
      console.log('methodsWords', methodsWords,scope,el)
      this[methodsWords](scope,el)
    },
    // 调用查看方法
    check(scope,el) {
      console.log(scope,el)
      alert('查看')
    },
    // 调用编辑方法
    edit(scope,el) {
      console.log(scope,el)
      alert('编辑')
    },
    // 调用删除方法
    del(scope,el) {
      console.log(scope,el)
      alert('删除')
    },
  }

}
</script>