前端最终规范


table组件

组件


<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      ref="DyTable"
      style="width: 100%"
      v-loading="listLoading"
      v-bind="tableConfig"
      :height="height"
      :header-cell-class-name="cellClass"
      v-on="tableListeners"
    >
      <template v-for="(item, index) in columns">
        <el-table-column
          v-if="item.type"
          :key="index"
          :type="item.type"
          v-bind="item"
          :width="item.width || ''"
        ></el-table-column>
        <el-table-column
          v-else-if="item.dataCode"
          :key="index"
          :prop="item.prop"
          v-bind="item"
          :width="item.width || ''"
        >
          <template #default="{ row }">
            <t-code
              :dataCode="item.prop"
              :dataCodeValue="row[item.prop]"
            ></t-code>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.slot"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          :width="item.width || ''"
        >
          <template #default="{ row }">
            <slot :name="item.prop" v-bind:row="row"></slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          v-bind="item"
          :key="index"
          :width="item.width || ''"
          :label="item.label"
          :prop="item.prop"
        ></el-table-column>
      </template>
    </el-table>
    <div class="pagination" v-if="remote">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        prev-text="上一页"
        next-text="下一页"
        :current-page="query.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper,slot"
        :total="query.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { fetchTablelist } from '@/api/TetchTable/index'
import tCode from './components/tCode'
export default {
  name: 'DyTable',
  props: {
    columns: {
      type: Array,
      require: true,
      default: () => {
        return []
      },
    },
    tableConfig:{
      type: Object,
      default: () => {
        return {}
      },
    },
    tableListeners:{
      type: Object,
      default: () => {
        return {}
      },
    },
    name: {
      type: String,
      require: true,
      default: 'DyTable',
    },
    selection: {
      type: Boolean,
      default: false,
    },
    remote: {
      type: Boolean,
      default: true,
    },
    selectlist: {
      //选中的项   row-key 必须设置
      type: Array,
      default: () => {
        return []
      },
    },

    url: {
      type: String,
      default: '',
    },
    // 5-31 增加测试数据 后期使用接口
    tableData: {
      type: Array,
    },
  },
  data() {
    return {
      height: this.$baseTableHeight() - 250,
      //tableData: [{sex:2},{sex:1}],
      listLoading: false,
      query: {
        pageSize: 4,
        pageNum: 1,
        total: 0,
      },
    }
  },
  components: { tCode },
  created() {},
  mounted() {
    if (this.remote) {
      this.fetchTable({})
      this.handlerSelecter()
    }
  },
  methods: {
    cellClass(row) {
      if (row.columnIndex === 0 && this.selection) {
        return 'DisableSelection'
      } else {
        return ''
      }
    },
    handlerSelecter() {
      if (this.tableConfig['row-key'] && this.selectlist.length > 0) {
        this.tableData.map((item) => {
          if (this.selectlist.includes(item[this.tableConfig['row-key']])) {
            this.toggleRowSelection(item, true)
          } else {
            this.toggleRowSelection(item, false)
          }
        })
      }
    },
    toggleAllSelection() {
      this.$refs['DyTable'].toggleAllSelection()
    },
    toggleRowSelection(row, flag) {
      this.$refs['DyTable'].toggleRowSelection(row, flag)
    },
    async fetchTable(queryParames) {
      try {
        const Loading = this.$baseLoading(1)
        const query = Object.assign({}, this.query, queryParames)
        let data = await fetchTablelist({ url: this.url, query })
        // 5-31 增加测试数据 后期使用接口
        // this.tableData = data.list
        // this.query.total = data.total
        this.listLoading = false
        Loading.close()
      } catch (error) {
        return this.$message.error(error)
        this.listLoading = false
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.$parent.search()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.$parent.search()
    },
    setTables(arr) {
      this.tableData = [...arr];
      this.handlerSelecte();
    },
  },
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.sureJump {
  width: 60px;
  height: 28px;
  line-height: 28px;
  display: inline-block;
  background: #ffffff;
  border: 1px solid rgb(220, 223, 230);
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000c17;
  margin-left: 15px;
  cursor: pointer;
}
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
  display: none !important;
  position: relative;
}
::v-deep .el-table .DisableSelection .cell:before {
  content: '';
  position: absolute;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  ::v-deep.btn-prev {
    width: 80px;
    height: 28px;
    background: #ffffff;
    border: 1px solid rgb(220, 223, 230);
  }
  ::v-deep.el-pagination button:disabled {
    background: rgba(0, 12, 23, 0.1);
  }
  ::v-deep.btn-next {
    width: 80px;
    height: 28px;
    background: #ffffff;
    border: 1px solid rgb(220, 223, 230);
  }
  ::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #2f54eb !important;
  }

}
</style>

使用

 <DyTable
        ref="myDyTable"
        :selectlist="selectlist"
        :tableData="tableData"
        :tableListeners="tableListeners"
        :tableConfig="tableConfig"
        :columns="columns"
      >
        <template v-slot:control="{ row }">
          <el-button
            type="text"
            icon="el-icon-sell"
            @click="confirmdocuments(row)"
          >
            交单
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            class="danger Line"
            @click="handlerDelete"
          >
            删除
          </el-button>
          <el-dropdown @command="handlercommand">
            <el-button
              type="text"
              icon="el-icon-sell"
              class="el-dropdown-link"
              @click="confirmdocuments(row)"
            >
              更多
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ type: 'edit', parames: row }">
                黄金糕
              </el-dropdown-item>
              <el-dropdown-item :command="{ type: 'edit', parames: row }">
                狮子头
              </el-dropdown-item>
              <el-dropdown-item :command="{ type: 'edit', parames: row }">
                螺蛳粉
              </el-dropdown-item>
              <el-dropdown-item :command="{ type: 'edit', parames: row }">
                双皮奶
              </el-dropdown-item>
              <el-dropdown-item :command="{ type: 'edit', parames: row }">
                蚵仔煎
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </DyTable>
export default {
  name: 'CostManagement',
  data() {
    return {
      tableConfig: {   // Dytable配置
        key: 'myDyTable',
        'tree-props': { children: 'children', hasChildren: 'hasChildren' },
        'row-key': 'id',
      },
      tableListeners: {
        // Dytable监听事件
        select: (selection, row) => {
          this.selectTable(selection, row)
        },
        'select-all': (selection) => {
          this.selectTableAll(selection)
        },
      },
      selects: [],
      selectlist: [1, 2, 3],
      formInline: {},
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 33,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 34,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 35,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 36,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
          ],
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      columns: [
        {
          type: 'selection',
        },
        {
          label: 'id',
          prop: 'id',
        },
        {
          label: 'date',
          prop: 'date',
        },
        {
          label: 'name',
          prop: 'name',
        },
        {
          label: 'address',
          prop: 'address',
        },
        {
          label: '操作',
          prop: 'control',
          slot: true,
        },
      ],
    }
  },
  methods: {
    toggleAllSelection() {
      this.$refs.myDyTable.toggleAllSelection()
    },
    cancelSelect() {
      let selects = [...this.$refs.myDyTable.$refs.DyTable.selection]
      selects.forEach((row) => {
        this.$refs.myDyTable.toggleRowSelection(row, false)
      })
    },
    selectTableAll(selection) {
      this.selects = selection
      console.log('selection', selection)
    },
    selectTable(selection, row) {
      this.selects = selection
      console.log('selection', selection)
      console.log(
        'this.$refs.myDyTable.selection',
        this.$refs.myDyTable.$refs.DyTable.selection
      ) //获取表格选中所有项
    },
  },
}

页面列表

ITEM_HTML