cv-table-editor 编辑表格

简要、特性

数据驱动、数据格式化、表格内容编辑器
加减、可编辑、行内编辑、输入校检、错误展示、一键禁用

示例

::: demo

<template>
  <div>
    <div style="margin-bottom: 20px">
      <cv-btn-base type="danger" @click="handleCheck">校检数据</cv-btn-base>
    </div>
    <cv-form-base>
      <cv-form-item label="所属班级">
        <cv-input-text v-model="formData.class" :disabled="true" />
      </cv-form-item>
      <cv-form-item label="编辑表格">
        <div style="margin-bottom: 20px">
          <cv-btn-base type="primary" @click="handleAdd">新增</cv-btn-base>
        </div>
        <cvTableEditor ref="refTableEditor" v-model="tableData" :newColumnValue="sett_TE_addDef">
          <cvTbColumnIndex label="序号" />
          <cvTbColumnCheck />
          <cvTbColumnText label="输入框" prop="grade" />
          <cvTbEditText
            label="输入框"
            prop="grade"
            :editAttr="{
              placeholder: '学员1212姓名',
              disabled: true
            }"
            :editStyle="{ marginRight: '10px' }"
            editRules="require"
          />
          <cvTbEditText
            label="输入框"
            prop="grade"
            :editAttr="{
              placeholder: '学员1212姓名'
            }"
            :editStyle="{ marginRight: '10px' }"
            editRules="require"
          />
          <cvTbColumnBase label="单选插槽" v-slot="{ row }">
            <cv-radio-group v-model="row.sex">
              <cv-radio-opt-base value="1">男</cv-radio-opt-base>
              <cv-radio-opt-base value="2">女</cv-radio-opt-base>
            </cv-radio-group>
          </cvTbColumnBase>
          <cvTbEditRadio label="单选" prop="dream" :dataLists="settRadio1" />
          <cvTbEditCheckbox label="多选" prop="duoxuan" :dataLists="settCheckbox1" />
          <cvTbEditSelect label="下拉选择" prop="birthplace" :dataLists="settSelect1" :dataField="settSelectField" />
          <cvTbColumnEnum label="枚举" prop="enum" :dataLists="settEnum1" />
          <cvTbColumnOpt label="操作" v-slot="{ row, scope }" minWidth="250">
            <cv-btn-text @click="handleBtnGuanlian(row, scope)" style="color: #303133">关联</cv-btn-text>
            <cv-btn-text @click="handleDelete(scope.$index)" style="color: #f56c6c">删除</cv-btn-text>
          </cvTbColumnOpt>
        </cvTableEditor>
      </cv-form-item>
    </cv-form-base>
    <!-- 显示数据 -->
    <pre style="margin-top: 20px; background: #f6f6f6; padding: 20px; clear: both">{{ tableData }}</pre>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      formData: {
        class: '三年级二班'
      },
      tableData: [
        {
          grade: '三年级二班',
          name: '2112',
          sex: '男',
          tuition: 2000,
          unPay: 100,
          status: 0,
          enum: 2
        },
        { grade: '三年级3班', name: '', sex: '男', tuition: 2000, unPay: 100, status: 1, dream: '', duoxuan: [] }
      ],
      sett_TE_addDef: { grade: '三年级二班', status: 1 },
      settRadio1: [
        { label: '科学家', value: 'scientist' },
        { label: '警察', value: 'policeman' },
        { label: '程序员', value: '程序员' }
      ],
      settCheckbox1: [
        { label: '水果', value: '水果' },
        { label: '沙拉', value: '沙拉' },
        { label: '米饭', value: '米饭' }
      ],
      settSelect1: [
        { name: '北京', id: 'beijing' },
        { name: '上海', id: 'shanghai' },
        { name: '广州', id: 'guangzhou' }
      ],
      settSelectField: { label: 'name', value: 'id' },
      settEnum1: {
        0: '禁用0',
        1: '正常1',
        2: '异常2'
      }
    };
  },
  created() {},
  methods: {
    // 校检数据
    handleCheck() {
      this.$refs['refTableEditor'].validate().catch(({ errors, fields }) => {
        console.log(errors, fields);
      });
    },
    handleBtnGuanlian(row, scope) {
      console.log(scope, row);
    },
    handleAdd() {},
    // 删除
    handleDelete(index) {
      this.tableData.splice(index, 1);
    }
  }
};
</script>

:::

Props 属性说明

字段	类型	必须	默认	说明
tableAttrs	Object	false		表格的属性
tableOn	String			表格事件
v-model	Array			双向绑定 表单数据
disabled	Boolean	false		禁用 (对所有input框禁用))