对elementui中table的二次封装

##仅仅写了留着自己用,不加解释,要用的自己看代码,实现的应用场景
1.动态添加不同的输入框选择框时间选择器且支持联动实现多行新增附加校验;
2.实现点击编辑操作把span标签换成输入框选择框时间选择器实现编辑
3.能用判断条件实现按钮的启用禁用,内容颜色的改变,过滤器功能
4.可以配合表格配置实现列删除,列宽度配置,列的交换
5.勾选表格实现对按钮操作的控制

table组件

<template>
  <div id="table">
    <el-table
      :ref="tableInfo.ref"
      :data="formatData"
      border
      stripe
      style="width: 100%"
      @select="onTableSelect"
      @selection-change="handleSelectionChange"
      @header-dragend="colChange"
    >
      >
      <!-- 表头 、表体-->
      <template v-for="column in tableInfo.columns">
        <el-table-column
          v-if="column.type"
          :fixed="column.fixed"
          :key="column.desc+new Date()"
          :label="column.name"
          :sortable="column.sortable?'custom':false"
          :type="column.type"
          :width="column.width==undefined?'auto':column.width"
          align="center"
        />
        <el-table-column
          v-if="!column.type"
          :fixed="column.fixed"
          :key="column.desc+new Date()"
          :label="column.name"
          :prop="column.desc"
          :show-overflow-tooltip="column.tooltip?true:false"
          :sortable="column.sortable?'custom':false"
          :width="column.width==undefined?'auto':column.width"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="!column.ShowState&&!column.showAndColor&&!column.show1&&!column.innerType&&!column.editInColumn&&!column.editBtns"
              :class="`${[1].includes(scope.row['stateIndex'])?'stateColorOne':([2].includes(scope.row['stateIndex'])?'stateColorTwo':'')}`"
              @click="onTableClick(column,scope.row,column.desc)"
            >{
   {
    scope.row[column.desc] }}</div>

            <div
              v-if="column.editInColumn"
              :class="`${[1].includes(scope.row['stateIndex'])?'stateColorOne':([2].includes(scope.row['stateIndex'])?'stateColorTwo':'')}`"
            >
              <span v-text="scope.row[column.desc]" v-if="scope.row['changeEdit']"></span>
              <el-select
                v-if="column.editInColumn==='select'&&!scope.row['changeEdit']"
                v-model="scope.row[column.desc]"
                :placeholder="column.placeholder"
                filterable
                clearable
              >
                <el-option
                  v-for="(item,i) in column.Options"
                  :key="i"
                  :label="item.label"
                  :value="item"
                  :value-key="true"
                />
              </el-select>
              <el-input
                v-if="column.editInColumn==='input'&&!scope.row['changeEdit']"
                v-model="scope.row[column.desc]"
                :placeholder="column.placeholder"
                clearable
              />
              <el-date-picker
                v-if="column.editInColumn==='date'&&!scope.row['changeEdit']"
                v-model="scope.row[column.desc]"
                :placeholder="column.placeholder"
                value-format="yyyy-MM-dd"
                type="date"
              />
            </div>

            <div v-if="column.innerType">
              <el-select
                v-if="column.innerType==='select'"
                :class="{'select-border':column.verify&&scope.row.verify[column.desc]}"
                v-model="scope.row[column.desc]"
                filterable
                clearable
                :placeholder="column.placeholder"
                @change="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @keyup.18.native="get"
              >
                <el-option
                  v-for="(item,i) in column.Options"
                  :key="i"
                  :label="item.label"
                  :value="item"
                  :value-key="true"
                />
              </el-select>
              <el-input
                :class="{'input-border':column.verify&&scope.row.verify[column.desc]}"
                v-if="column.innerType==='input'"
                v-model="scope.row[column.desc]"
                clearable
                :placeholder="column.placeholder"
                @input="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @keyup.18.native="get"
              />
              <el-date-picker
                :class="{'date-border':column.verify&&scope.row.verify[column.desc]}"
                v-if="column.innerType==='date'"
                v-model="scope.row[column.desc]"
                value-format="yyyy-MM-dd"
                type="date"
                :placeholder="column.placeholder"
                @blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @keyup.18.native="get"
              />
            </div>

            <div
              v-if="column.show1"
              :style="{'color':column.colorShow?((scope.row[column.desc] == column.statusIndex[0]||scope.row[column.desc] == null)? column.colorShow[0]:(scope.row[column.desc] == column.statusIndex[1]? column.colorShow[1] :( scope.row[column.desc] === column.statusIndex[2]?column.colorShow[2]:( scope.row[column.desc] === column.statusIndex[3]?column.colorShow[3]:( scope.row[column.desc] === column.statusIndex[4]?column.colorShow[4]:column.colorShow[5]))))):false}"
            >{
   {
    (scope.row[column.desc] == column.statusIndex[0]||scope.row[column.desc] == null)? column.status[0]:(scope.row[column.desc] == column.statusIndex[1]? column.status[1] :( scope.row[column.desc] === column.statusIndex[2]?column.status[2]:( scope.row[column.desc] === column.statusIndex[3]?column.status[3]:( scope.row[column.desc] === column.statusIndex[4]?column.status[4]:column.status[5])))) }}</div>
            <div
              v-if="column.showAndColor"
              :style="{color:(scope.row[column.desc] == 0||scope.row[column.desc] == null)? column.style[0]:(scope.row[column.desc] == 1? column.style[1] :( scope.row[column.desc] === 2?column.style[2]:( scope.row[column.desc] === 3?column.style[3]:( scope.row[column.desc] === 4?column.style[4]:column.style[5]))))}"
            >{
   {
    (scope.row[column.desc] == 0||scope.row[column.desc] == null)? column.status[0]:(scope.row[column.desc] == 1? column.status[1] :( scope.row[column.desc] === 2?column.status[2]:( scope.row[column.desc] === 3?column.status[3]:( scope.row[column.desc] === 4?column.status[4]:column.status[5])))) }}</div>

            <div v
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值