单元格编辑框 - SEditCell

适配 auto-complete、date-picker、input、select、textarea、tree-select、s-icon-select 等组件

-> SEditCellInput
-> SEditCellSelect
-> SEditCellTextarea
-> SEditCellSelectIcon
-> SEditCellTreeSelect
-> SEditCellDatePicker
-> SEditCellAutoComplete

演示

Input 输入框

Input 输入框

一个基于 AInput 输入框 进行封装的单元格编辑框 => SEditCellInput

无输入

这是一段旧输入值

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <SEditCellInput
      empty="无输入"
      :text="value1"
      :allowClear="true"
      :cellStyle="cellStyle"
      @confirm="(proxy) => value1 = proxy.value"
    />

    <SEditCellInput
      empty="无输入"
      :text="value2"
      :allowClear="true"
      :cellStyle="cellStyle"
      @confirm="(proxy) => value2 = proxy.value"
    />

    <SEditCellInput
      empty="无输入"
      :text="value3"
      :opened="true"
      :allowClear="true"
      :cellStyle="cellStyle"
      @confirm="(proxy) => value3= proxy.value"
    />
  </ASpace>
</template>

<script setup lang="ts">
const value1 = ref('')
const value2 = ref('这是一段旧输入值')
const value3 = ref('这是一段新输入值')

const cellStyle = ref({
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '30px',
    width: '185px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '32px',
    width: 'auto',
  },
})
</script>

Select 选择框

Select 选择框

一个基于 ASelect 选择框 进行封装的单元格编辑框 => SEditCellSelect

无

Alva

Lucy

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <SEditCellSelect
      empty="无"
      :text="value1"
      :allowClear="true"
      :cellStyle="cellStyle"
      :options="presetOptions"
      @confirm="(proxy) => value1 = proxy.value"
    />

    <SEditCellSelect
      empty="无"
      :text="value2"
      :allowClear="true"
      :cellStyle="cellStyle"
      :options="presetOptions"
      @confirm="(proxy) => value2 = proxy.value"
    />

    <SEditCellSelect
      empty="无"
      :text="value3"
      :opened="true"
      :allowClear="true"
      :cellStyle="cellStyle"
      :options="presetOptions"
      @confirm="(proxy) => value3 = proxy.value"
    />
  </ASpace>
</template>

<script setup lang="ts">
const value1 = ref<any>('')
const value2 = ref<any>('alva')
const value3 = ref<any>('lucy')

const presetOptions = ref([
  {
    value: 'alva',
    label: 'Alva',
  },
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
])

const cellStyle = ref({
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '30px',
    width: '180px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '32px',
    width: 'auto',
  },
})
</script>

Textarea 文本框

Textarea 文本框

一个基于 AInput.TextArea 文本框 进行封装的单元格编辑框 => SEditCellTextarea

无文本

这是一段旧输入文本

这是一段新输入文本

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <SEditCellTextarea
      empty="无文本"
      :text="value1"
      :allowClear="true"
      :cellStyle="cellStyle"
      @confirm="(proxy) => value1 = proxy.value"
    />

    <SEditCellTextarea
      empty="无文本"
      :text="value2"
      :allowClear="true"
      :cellStyle="cellStyle"
      @confirm="(proxy) => value2 = proxy.value"
    />

    <SEditCellTextarea
      empty="无文本"
      :text="value3"
      :opened="true"
      :allowClear="true"
      :cellStyle="cellStyle"
      @confirm="(proxy) => value3= proxy.value"
    />
  </ASpace>
</template>

<script setup lang="ts">
const value1 = ref('')
const value2 = ref('这是一段旧输入文本')
const value3 = ref('这是一段新输入文本')

const cellStyle = ref({
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '30px',
    width: '195px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '32px',
    width: 'auto',
  },
})
</script>

SelectIcon 选择框

SelectIcon 选择框

一个基于 SIconSelect 选择框 进行封装的单元格编辑框 => SEditCellSelectIcon

未选择

AimOutlined

font-personal-outline

 

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <SEditCellSelectIcon
      empty="未选择"
      allowClear
      :text="value1"
      :cellStyle="cellStyle"
      @confirm="(proxy) => value1 = proxy.value"
    />

    <SEditCellSelectIcon
      empty="未选择"
      allowClear
      :text="value2"
      :cellStyle="cellStyle"
      @confirm="(proxy) => value2 = proxy.value"
    />

    <SEditCellSelectIcon
      empty="未选择"
      allowClear
      :opened="true"
      :text="value3"
      :cellStyle="cellStyle"
      iconPrefix="font-"
      iconfontUrl="https://at.alicdn.com/t/c/font_1403293_zz95gjv9ru.js"
      @confirm="(proxy) => value3 = proxy.value"
    />
  </ASpace>
</template>

<script setup lang="ts">
const value1 = ref<any>('')
const value2 = ref<any>('AimOutlined')
const value3 = ref<any>('font-personal-outline')

const cellStyle = ref({
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '30px',
    minWidth: '240px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '32px',
    width: 'auto',
  },
})
</script>

TreeSelect 选择框

TreeSelect 选择框

一个基于 ATreeSelect 树形选择框 进行封装的单元格编辑框 => SEditCellTreeSelect

无

Alva

Lucy

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <SEditCellTreeSelect
      empty="无"
      :text="value1"
      :allowClear="true"
      :showSearch="true"
      :cellStyle="cellStyle"
      :fieldNames="fieldNames"
      :treeData="presetOptions"
      treeNodeFilterProp="label"
      @confirm="(proxy) => value1 = proxy.value"
    />

    <SEditCellTreeSelect
      empty="无"
      :text="value2"
      :allowClear="true"
      :showSearch="true"
      :cellStyle="cellStyle"
      :fieldNames="fieldNames"
      :treeData="presetOptions"
      treeNodeFilterProp="label"
      @confirm="(proxy) => value2 = proxy.value"
    />

    <SEditCellTreeSelect
      empty="无"
      :text="value3"
      :opened="true"
      :allowClear="true"
      :showSearch="true"
      :cellStyle="cellStyle"
      :fieldNames="fieldNames"
      :treeData="presetOptions"
      treeNodeFilterProp="label"
      @confirm="(proxy) => value3 = proxy.value"
    />
  </ASpace>
</template>

<script setup lang="ts">
const value1 = ref<any>('')
const value2 = ref<any>('alva')
const value3 = ref<any>('lucy')

const presetOptions = ref([
  {
    value: 'A',
    label: 'A机构',
    children: [
      {
        value: 'alva',
        label: 'Alva',
      },
      {
        value: 'jack',
        label: 'Jack',
      },
    ],
  },
  {
    value: 'B',
    label: 'B机构',
    children: [
      {
        value: 'lucy',
        label: 'Lucy',
      },
      {
        value: 'cris',
        label: 'Cris',
      },
    ],
  },
])

const fieldNames = ref({
  children: 'children',
  label: 'label',
  value: 'value',
})

const cellStyle = ref({
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '30px',
    width: '180px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '32px',
    width: 'auto',
  },
})
</script>

DatePicker 日期选择框

DatePicker 日期选择框

一个基于 ADatePicker 日期选择框 进行封装的单元格编辑框 => SEditCellDatePicker

无日期

2024-05-31

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <SEditCellDatePicker
      empty="无日期"
      :text="value1"
      :allowClear="true"
      :cellStyle="cellStyle"
      format="YYYY-MM-DD"
      valueFormat="YYYY-MM-DD"
      @confirm="(proxy) => value1 = proxy.value"
    />

    <SEditCellDatePicker
      empty="无日期"
      :text="value2"
      :allowClear="true"
      :cellStyle="cellStyle"
      format="YYYY-MM-DD"
      valueFormat="YYYY-MM-DD"
      @confirm="(proxy) => value2 = proxy.value"
    />

    <SEditCellDatePicker
      empty="无日期"
      :text="value3"
      :opened="true"
      :allowClear="true"
      :cellStyle="cellStyle"
      format="YYYY-MM-DD"
      valueFormat="YYYY-MM-DD"
      @confirm="(proxy) => value3= proxy.value"
    />
  </ASpace>
</template>

<script setup lang="ts">
const value1 = ref('')
const value2 = ref('2024-05-31')
const value3 = ref('2024-06-01')

const cellStyle = ref({
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '30px',
    width: '180px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '32px',
    width: 'auto',
  },
})
</script>

AutoComplete 输入框

AutoComplete 输入框

一个基于 AAutoComplete 输入框 进行封装的单元格编辑框 => SEditCellAutoComplete

无输入

Option2

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <SEditCellAutoComplete
      empty="无输入"
      :text="value1"
      :options="options"
      :cellStyle="cellStyle"
      :filterOption="(value, option) => !!option?.label.startsWith(value.trim())"
      @confirm="(proxy) => value1 = proxy.value"
    />

    <SEditCellAutoComplete
      empty="无输入"
      :text="value2"
      :options="options"
      :cellStyle="cellStyle"
      :filterOption="(value, option) => !!option?.label.startsWith(value.trim())"
      @confirm="(proxy) => value2 = proxy.value"
    />

    <SEditCellAutoComplete
      empty="无输入"
      :text="value3"
      :opened="true"
      :options="options"
      :cellStyle="cellStyle"
      :filterOption="(value, option) => !!option?.label.startsWith(value.trim())"
      @confirm="(proxy) => value3= proxy.value"
    />
  </ASpace>
</template>

<script setup lang="ts">
const value1 = ref<any>('')
const value2 = ref<any>('Option2')
const value3 = ref<any>('Option3')

const cellStyle = ref({
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '30px',
    width: '185px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '32px',
    width: 'auto',
  },
})

const options = ref([
  { label: 'Option1', value: 'Option1' },
  { label: 'Option2', value: 'Option2' },
  { label: 'Option3', value: 'Option3' },
])
</script>

With STable 表格单元格编辑

With STable 表格单元格编辑

实现表格行内单元格编辑功能，支持设置 status = false, 同步关闭所有 SEditCell 编辑状态

SEditCellInput	SEditCellSelect	SEditCellTextarea	SEditCellSelectIcon	SEditCellTreeSelect	SEditCellDatePicker	SEditCellAutoComplete
	Alva	输入文本	BellOutlined	Jack

复制代码

显示代码

<template>
  <STable
    ref="table"
    v-model:columns="columns"
    v-model:sources="sources"
    style="overflow: auto;"
    tableLayout="auto"
    :scroll="scroll"
  >
    <template #bodyerCell="{ column, record }">
      <template v-if="column.key === 'input'">
        <SEditCellInput
          v-model:text="record.input"
          v-model:status="cellState"
          empty="未输入"
          :opened="true"
          :allowClear="true"
          :cellStyle="cellStyle"
          @confirm="cellState = false"
        />
      </template>

      <template v-if="column.key === 'select'">
        <SEditCellSelect
          v-model:text="record.select"
          v-model:status="cellState"
          empty="未选择"
          :opened="true"
          :allowClear="true"
          :cellStyle="cellStyle"
          :options="selectOptions"
          @confirm="cellState = false"
        />
      </template>

      <template v-if="column.key === 'textarea'">
        <SEditCellTextarea
          v-model:text="record.textarea"
          v-model:status="cellState"
          empty="未输入"
          :opened="true"
          :allowClear="true"
          :cellStyle="cellStyle"
          @confirm="cellState = false"
        />
      </template>

      <template v-if="column.key === 'selectIcon'">
        <SEditCellSelectIcon
          v-model:text="record.selectIcon"
          v-model:status="cellState"
          empty="未选择"
          :opened="true"
          :allowClear="true"
          :cellStyle="cellStyle"
          @confirm="cellState = false"
        />
      </template>

      <template v-if="column.key === 'treeSelect'">
        <SEditCellTreeSelect
          v-model:text="record.treeSelect"
          v-model:status="cellState"
          empty="未选择"
          :opened="true"
          :allowClear="true"
          :showSearch="true"
          :cellStyle="cellStyle"
          :treeData="treeOptions"
          :fieldNames="fieldNames"
          treeNodeFilterProp="label"
          @confirm="cellState = false"
        />
      </template>

      <template v-if="column.key === 'datePicker'">
        <SEditCellDatePicker
          v-model:text="record.datePicker"
          v-model:status="cellState"
          :cellStyle="cellStyle"
          empty="无日期"
          :opened="true"
          :allowClear="true"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
          @confirm="cellState = false"
        />
      </template>

      <template v-if="column.key === 'autoComplete'">
        <SEditCellAutoComplete
          v-model:text="record.autoComplete"
          v-model:status="cellState"
          :cellStyle="cellStyle"
          empty="无输入"
          :opened="true"
          :options="completeOptions"
          :filterOption="(value, option) => !!option?.label.startsWith(value.trim())"
          @confirm="cellState = false"
        />
      </template>
    </template>
  </STable>
</template>

<script setup lang="ts">
const table = ref(null as InstanceType<STable> | null)

const columns = tableColumnsDefiner([
  {
    title: 'SEditCellInput',
    dataIndex: 'input',
  },
  {
    title: 'SEditCellSelect',
    dataIndex: 'select',
  },
  {
    title: 'SEditCellTextarea',
    dataIndex: 'textarea',
  },
  {
    title: 'SEditCellSelectIcon',
    dataIndex: 'selectIcon',
  },
  {
    title: 'SEditCellTreeSelect',
    dataIndex: 'treeSelect',
  },
  {
    title: 'SEditCellDatePicker',
    dataIndex: 'datePicker',
  },
  {
    title: 'SEditCellAutoComplete',
    dataIndex: 'autoComplete',
  },
])

const sources = tableSourcesDefiner([
  {
    input: '输入值',
    select: 'alva',
    textarea: '输入文本',
    selectIcon: 'BellOutlined',
    treeSelect: 'jack',
    datePicker: '2024-06-01',
    autoComplete: 'Lucy',
  },
])

const scroll = tableScrollDefiner({
  x: 'max-content',
  y: 'auto',
})

/* AutoComplete */
const completeOptions = ref([
  {
    value: 'Alva',
    label: 'Alva',
  },
  {
    value: 'Jack',
    label: 'Jack',
  },
  {
    value: 'Lucy',
    label: 'Lucy',
  },
])

/* Select */
const selectOptions = ref([
  {
    value: 'alva',
    label: 'Alva',
  },
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
])

/* TreeSelect */
const treeOptions = ref([
  {
    value: 'A',
    label: 'A机构',
    children: [
      {
        value: 'alva',
        label: 'Alva',
      },
      {
        value: 'jack',
        label: 'Jack',
      },
    ],
  },
  {
    value: 'B',
    label: 'B机构',
    children: [
      {
        value: 'lucy',
        label: 'Lucy',
      },
      {
        value: 'cris',
        label: 'Cris',
      },
    ],
  },
])

// when default is opended
const cellState = ref(true)

const cellStyle = ref({
  container: {
    display: 'inline-block',
    width: 'auto',
  },
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '35px',
    minWidth: '180px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '35px',
    width: 'auto',
  },
})

const fieldNames = {
  children: 'children',
  label: 'label',
  value: 'value',
}
</script>

API

Props

SEditCell (通用)

参数	说明	类型	默认值
text (v-model)	输入值	string	-
empty	输入值 text 为空时，文本模式下的显示内容	string	-
edit	是否显示 edit icon	boolean	true
check	是否显示 check icon	boolean	true
synced	当输入值 text 值更改时，是否同步更新	boolean	false
opened	默认打开 编辑模式 状态	boolean	false
status (v-model)	监听状态，当值从 true -> false 时，关闭编辑模式	boolean	false
tooltip	是否启用 SEllipsis	object	{ enable: true, ellipsis: false }
disabled	是否禁用	boolean	false
allowClear	是否允许清除	boolean	false
placeholder	输入框/选择框 提示文本	string	-
cellStyle	单元框各部分样式 (详见下方 cellStyle 选项)	object	-

SEditCellSelect

参数	说明	类型	默认值
options	Options 选项数据	Array<{value, label, [disabled, key, title]}>	[]
showArrow	是否显示下拉小箭头	boolean	true
showSearch	配置是否可搜索	boolean	true
fieldNames	自定义节点 label、value、options 的字段	object	{ label, value, options }
optionFilterProp	搜索时过滤对应的 option 属性，不支持 children	string	-

SEditCellTextarea

参数	说明	类型	默认值
autoSize	自适应内容高度，可设置 boolean 或对象 { minRows: 2, maxRows: 6 }	boolean | object	-

SEditCellSelectIcon

参数	说明	类型	默认值
iconStyle	设置 SIcon style	string object	-
iconClass	设置 SIcon class	string object	-
iconPrefix	设置 SIcon 的 iconfont icon 标识符	string	-
iconfontUrl	设置 SIcon 的 iconfont url 地址	string	-
optionFilterProp	搜索时过滤对应 option 属性	string	-
optionLabelProp	回填到选择框的 Option 的属性值	string	-
fieldNames	自定义节点 label、value、options 的字段	object	{ label, value, options }
showSearch	配置是否可搜索	boolean	true
showArrow	是否显示下拉小箭头	boolean	true

SEditCellTreeSelect

参数	说明	类型	默认值
treeData	treeNodes 数据	Array<{value, label, children}>	[]
showArrow	是否显示下拉小箭头	boolean	true
showSearch	配置是否可搜索	boolean	true
fieldNames	自定义节点 label、value、options 的字段	object	{ label, value, options }
treeNodeFilterProp	输入项过滤对应的 treeNode 属性	string	'value'
treeDefaultExpandAll	默认展开所有节点	boolean	true

SEditCellDatePicker

参数	说明	类型	默认值
mode	日期面板的状态	time | date | month | year | decade	-
picker	设置选择器类型	date | week | month | quarter | year	-
format	设置日期格式	formatType	true
showTime	增加时间选择功能	object | boolean	-
valueFormat	绑定值的格式	string 具体格式	-
inputReadOnly	设置输入框为只读	boolean	false

SEditCellAutoComplete

参数	说明	类型	默认值
options	Options 选项数据	Array<{ value, label }>	[]
filterOption	根据输入项进行筛选	boolean | (inputValue: string, option) => boolean	-

关于 cellStyle 选项

参数	说明	类型	默认值
container	设置 容器部分 样式	object	-
check	设置 check icon 样式	object	-
edit	设置 edit icon 样式	object	-
inputWrapper	设置 输入框/选择框 wrapper 样式	object	-
input	设置 输入框/选择框 样式	object	-
textWrapper	设置 文本模式 样式	object	-

Emits

SEditCell (通用)

事件	说明	类型
edit	打开 编辑模式 时	(editable: boolean; value: string;) => void
blur	输入框/选择框 失去焦点时	(editable: boolean; value: string;) => void
focus	输入框/选择框 获取焦点时	(editable: boolean; value: string;) => void
change	输入框/选择框 值变化时	(editable: boolean; value: string;) => void
confirm	输入框/选择框 确认提交 (点击 check 图标)	(editable: boolean; value: string;) => void