vxe-table 表格组件简单使用

1.效果展示

2.代码

配置文件

options.js

export const FlinkColumnDataType = [
  {
    "label": "char",
    "value": "char",
    "methodsName": "CHAR",
    "code": 1,
    "name": "char",
    "displayName": ""
  },
  {
    "label": "varchar",
    "value": "varchar",
    "methodsName": "VARCHAR",
    "code": 2,
    "name": "varchar",
    "displayName": ""
  },
  {
    "label": "string",
    "value": "string",
    "methodsName": "STRING",
    "code": 3,
    "name": "string",
    "displayName": ""
  },
  {
    "label": "boolean",
    "value": "boolean",
    "methodsName": "BOOLEAN",
    "code": 4,
    "name": "boolean",
    "displayName": ""
  },
  {
    "label": "bytes",
    "value": "bytes",
    "methodsName": "BYTES",
    "code": 5,
    "name": "bytes",
    "displayName": ""
  },
  {
    "label": "decimal",
    "value": "decimal",
    "methodsName": "DECIMAL",
    "code": 6,
    "name": "decimal",
    "displayName": ""
  },
  {
    "label": "tinyint",
    "value": "tinyint",
    "methodsName": "TINYINT",
    "code": 7,
    "name": "tinyint",
    "displayName": ""
  },
  {
    "label": "smallint",
    "value": "smallint",
    "methodsName": "SMALLINT",
    "code": 8,
    "name": "smallint",
    "displayName": ""
  },
  {
    "label": "integer",
    "value": "integer",
    "methodsName": "INTEGER",
    "code": 9,
    "name": "integer",
    "displayName": ""
  },
  {
    "label": "bigint",
    "value": "bigint",
    "methodsName": "BIGINT",
    "code": 10,
    "name": "bigint",
    "displayName": ""
  },
  {
    "label": "float",
    "value": "float",
    "methodsName": "FLOAT",
    "code": 11,
    "name": "float",
    "displayName": ""
  },
  {
    "label": "double",
    "value": "double",
    "methodsName": "DOUBLE",
    "code": 12,
    "name": "double",
    "displayName": ""
  },
  {
    "label": "date",
    "value": "date",
    "methodsName": "DATE",
    "code": 13,
    "name": "date",
    "displayName": ""
  },
  {
    "label": "time",
    "value": "time",
    "methodsName": "TIME",
    "code": 14,
    "name": "time",
    "displayName": ""
  },
  {
    "label": "timestamp",
    "value": "timestamp",
    "methodsName": "TIMESTAMP",
    "code": 15,
    "name": "timestamp",
    "displayName": ""
  },
  {
    "label": "timestamp_ltz",
    "value": "timestamp_ltz",
    "methodsName": "TIMESTAMP_LTZ",
    "code": 16,
    "name": "timestamp_ltz",
    "displayName": ""
  },
  {
    "label": "interval",
    "value": "interval",
    "methodsName": "INTERVAL",
    "code": 17,
    "name": "interval",
    "displayName": ""
  },
  {
    "label": "array",
    "value": "array",
    "methodsName": "ARRAY",
    "code": 18,
    "name": "array",
    "displayName": ""
  },
  {
    "label": "multiset",
    "value": "multiset",
    "methodsName": "MULTISET",
    "code": 19,
    "name": "multiset",
    "displayName": ""
  },
  {
    "label": "map",
    "value": "map",
    "methodsName": "MAP",
    "code": 20,
    "name": "map",
    "displayName": ""
  },
  {
    "label": "row",
    "value": "row",
    "methodsName": "ROW",
    "code": 21,
    "name": "row",
    "displayName": ""
  },
  {
    "label": "raw",
    "value": "raw",
    "methodsName": "RAW",
    "code": 22,
    "name": "raw",
    "displayName": ""
  }
]
const CategoryType = [{
  value: 0,
  label: "default",
  methodsName: 'DEFAULT',
},
{
  value: 1,
  label: "字段",
  key: 1,
  methodsName: 'RAW',
},
{
  value: 2,
  label: "表达式",
  key: 2,
  methodsName: 'FUNCTION',
},
{
  value: 3,
  label: "常量",
  key: 3,
  methodsName: 'CONSTANT',
},
{
  value: 4,
  label: "参数",
  key: 4,
  methodsName: 'PARAM',
},

]
export default {
  FlinkColumnDataType,
  CategoryType,
}

<template>
  <div class='demo'>
    <vxe-table border
               show-overflow
               :edit-rules="tableRules"
               :data.sync="tableData"
               :edit-config="editConfig">
      <template v-for="(config, index) in tableColumn">
        <template v-if="config.editRender">
          <vxe-table-column v-bind="config"
                            :key="index"
                            :edit-render="config.editRender"
                            :events="config.events"
                            show-overflow>
          </vxe-table-column>
        </template>
        <template v-else>
          <vxe-table-column v-bind="config"
                            :key="index"
                            show-overflow></vxe-table-column>
        </template>

      </template>
      <vxe-table-column title="操作"
                        width="80px">
        <template #default="{ row, $rowIndex }">
          <el-button :disabled="isPreview"
                     v-if="!row.disabled"
                     type="text"
                     @click="deleteField(row, $rowIndex)">删除</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>

  </div>
</template>

<script>
import optionsList from "./options.js"
export default {
  name: 'demo',
  props: {
    isPreview: {
      type: Boolean,
      default: false,
    }
  },
  data () {
    const editConfig = {
      trigger: 'click',
      mode: 'cell',
      activeMethod: this.activeCellMethod
    }
    const tableRules = {
      zdmc: [{ required: true, message: "请填字段名称" }],
      zdlx: [{ required: true, message: "请填字段类型" }],
      lb: [{ required: true, message: "请填类别" }],
      zdz: [{ required: true, message: "请填字段值" }],
    }
    const tableColumn = [
      {
        field: "zdmc",
        title: "字段名称",
        editRender: { name: "input", attrs: { type: "text" } },
      },
      {
        field: "zdlx",
        title: "字段类型",
        editRender: {
          name: "$select",
          options: optionsList.FlinkColumnDataType,
          optionProps: { value: "value", label: "label" },
        },
      },
      {
        field: "lb",
        title: "类别",
        editRender: {
          name: "$select",
          options: [1, 2, 3, 4].map((item) => {
            const obj = optionsList.CategoryType.find(
              (fItme) => fItme.value === item
            );
            return {
              ...obj,
              disabled: item === 1 ? true : false,
            };
          }),
          optionProps: { value: "value", label: "label" },
        },
      },
      {
        field: "zdz",
        title: "字段值",
        editRender: { name: "input", attrs: { type: "text" } },
      },
    ]
    const tableData = [
      {
        zdmc: "name",
        zdlx: "string",
        lb: "字段",
        zdz: "",
        disabled: true,
      },
      {
        zdmc: "age",
        zdlx: "string",
        lb: "字段",
        zdz: "",
        disabled: true,
      },
      { zdmc: "avgage", zdlx: "string", lb: "表达式", zdz: "avg(age)" },
      { zdmc: "sour", zdlx: "int", lb: "常量", zdz: "1" },
      { zdmc: "data", zdlx: "data", lb: "参数", zdz: "${yyymmdd}" },
    ]
    return {
      tableRules,
      tableColumn,
      tableData,
      editConfig,
    }
  },
  methods: {
    // 是否可以点击修改
    activeCellMethod (value) {
      if (value.row.disabled) {
        return false;
      } else {
        return true;
      }
    },
    deleteField (row, index) {
      this.tableData.splice(index, 1);
    },
  },
}
</script>
<style lang='scss' scoped>
.demo {
  width: 700px;
  height: 1200px;
}
</style>

vxe-table 官网

详细配置请看官网
https://vxetable.cn/#/table/start/install