Q-DynamicTable 动态表格

动态行

提示

1.prop 支持多级命名规范。

2.table支持 v-bind="$attrs" 和 v-on="$listeners" 透传。

3.rules中的validator函数（value）=> true / 报错信息

const rules = [
    {
        validator: (value) => {
            return value > 0 ? true : '值必须大于0';
        }
    },
    {
        validator: (value, rowIndex, tableData) => {
            if (rowIndex > 0 && value <= tableData[rowIndex - 1][prop]) {
                return '当前值必须大于上一行的值';
            }
            return true;
        },
        multiple: true // 显式标记为多参数验证器
    }
]

4.type = custom时候，插槽为prop，值为{index, row, scope}

Submitted Data:

<template>
  <div>
    <QDynamicTable
        :columns="tableColumns"
        :table-data="tableData"
        @submit="handleSubmit"
    ></QDynamicTable>
    <div>
      <h3>Submitted Data:</h3>
      <pre style="color: white;">{{ submittedData }}</pre>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        tableColumns: [
          {
            prop: 'name.n1',
            label: 'Name',
            type: 'input',
            placeholder: 'Enter Name',
            rules: [{required: true, message: 'Name is required', trigger: 'blur'}]
          },
          {
            prop: 'email',
            label: 'Email',
            type: 'input',
            placeholder: 'Enter Email',
            rules: [{required: true, message: 'Email is required', trigger: 'blur'},
              {validator: value => /\S+@\S+\.\S+/.test(value) ? true : 'Invalid email format', trigger: 'blur'}]
          },
          {
            prop: 'age',
            label: 'Age',
            type: 'number',
            placeholder: 'Enter Age',
            rules: [{required: true, message: 'Age is required', trigger: 'blur'}]
          },
          {
            prop: 'gender', label: 'Gender', type: 'select', placeholder: '请选择Gender', options: [
              {value: 'male', label: 'Male'},
              {value: 'female', label: 'Female'}
            ], rules: [{required: true, message: 'Gender is required', trigger: 'change'}]
          }
        ],
        tableData: [
          {name: {n1: 'Alice'}, email: 'alice@example.com', age: 25, gender: 'female'},
          {name: {n1: 'Bolo'}, email: 'bob@example.com', age: 30, gender: 'male'}
        ],
        submittedData: null // 存储提交后的表格数据
      };
    },
    methods: {
      handleSubmit(data) {
        this.submittedData = data;
      }
    }
  };
</script>
<style>
  /**
 针对例子布局样式，无需复制到项目
  */
  table {
    margin: 0;
  }
</style>

Expand Copy Copy

示例代码

<template>
  <QDynamicTable
      size="mini"
      :columns="tableColumns"
      :table-data="tableData"
      :is-header="true"
      @submit="handleSubmit"
      @temporary="handleTemporary"
  >
    <template v-slot:ruleName="{row,index }">
      <QSelector v-model="row.ruleName"
                 placeholder="请输入规则名称"
                 :columns="ruleColumns"
                 :readonly="true"
                 :fetch-data-function="getRules"
                 :query-params="queryParamsRules"
                 @select="(data) => updateRowData(row, data)"
                 disabledField="id"
                 :disabled-data="temporaryData"
                 @selection="(data) => handleSelection(row, data)"

      />
    </template>
  </QDynamicTable>
</template>

<script>
  export default {
    data() {
      return {
        tableColumns: [
          {
            prop: 'ruleName',
            label: '规则名称',
            type: 'custom'
          },
          {
            prop: 'ruleNumber',
            label: '数值',
            type: 'number'
          }
        ],
        ruleColumns: [
          {
            prop: 'ruleName',
            label: '规则名称'
          }
        ],
        selectedData: [],
        tableData: [],
        queryParamsRules: {
          pageSize: 10,
          pageNum: 1,
          ruleName: ''
        },
        temporaryData: [],
      }
    },
    methods: {
      handleSubmit(data) {
        console.log('data==>', data, this.selectedData)
      },
      updateRowData(row, data) {
        Object.assign(row, {...data})
      },
      getRules(query) {
        return {
          rows: [
            {
              id: 1,
              ruleName: '规则1'
            },
            {
              id: 2,
              ruleName: '规则2'
            },
            {
              id: 3,
              ruleName: '规则3'
            }
          ],
          total: 3
        }
      },
      handleSelection(row, data) {
        console.log('selection==>', data)
        const temp = data.map(item => ({...row, ...item}))
        this.tableData = [...this.tableData, ...temp]
      },
      handleTemporary(data) {
        console.log('handleTemporary==>', data)
        this.temporaryData = data.filter(item => this.$QUtils.StrUtil.isNotBlank(item[this.ruleColumns[0].prop]))
      },
    }
  }
</script>

Expand Copy Copy

Attributes

属性名	说明	类型	可选值	默认值
tableData	表格数据 (disabled字段为禁用)	Array	—	[]
columns	列数据	Array	—	columns
showIndex	显示序号	Boolean	—	true
isHeader	头尾显示	Boolean	—	false
showButtons	显示全部按钮	Boolean	—	true
buttonSize	全部按钮大小	String	—	mini
showSubmit	显示手动提交按钮	Boolean	—	false
disabled	全部数据文本形式展示	Boolean	—	false
buttonWidth	按钮宽度	Number	—	—
validateAll	全部验证通过或者部分验证通过数据	Boolean	—	true

提示

1.支持自定义组件,其中这三个字段需要对应一样 v-slot:drugName v-model="row.drugName" prop: 'tableColumns中的drugName'

2.嵌入el-popover,需要加入(已弃用)

::v-deep .el-popover {
 position: fixed;
}

3.示例代码 只有 disabled属性 / column.type === 'text'|| scope.row.disabled === true/ column.type === 'custom 支持自定义template模板语法

columns

属性名	说明	类型	可选值	默认值
prop	字段	String	—	—
label	标签	String	—	—
value	默认值	String	—	—
visible	是否显示	boolean	false	显示
lock	disbaled解锁	boolean	false	—
disabled	禁止	boolean	—	false
type	类型	String	text/html/radio/select /button/custom/number /time/date/datetime/daterange	—
style	样式	Object	—	—
attrs	type中的透传	Object	—	—
columnAttrs	Table-column中的透传	Object	—	—
listeners	type中的透传	Object	—	—
columnListeners	Table-column中的透传	Object	—	—
rules	验证规则	Array	—	—
options	下拉数据 (type为 radio、select)	Array	—	—
text	文本数据 (type为 text、html)	String	—	—
buttons	按钮 (type为 button)	Array	—	—

Events

事件名	说明	回调参数	参数说明
row-removed	删除事件	index	删除事件
submit	获取全部数据	value	全部数据
temporary	置灰数据	value	置灰数据

Slots

属性名	说明	参数
prop	属性插槽	{index, row, scope}
extra	额外插槽	{index, row, scope}