ColumnOperation 操作列

说明

基于 el-table-column 封装，主要用于为表格内行数据提供各种操作按钮，包括按钮禁用状态管理、tooltip提示、下拉菜单展示、确认对话框等常用功能。

（1）每个按钮都使用 y-button 组件，也就是默认支持防抖、节流、单击、双击等特性

（2）每个按钮都使用 y-pop 组件包裹，也就是默认支持 el-tooltip 和 el-popover 特性

用法示例

基础用法

共 0项数据

• 1

Go to

<template>
  <y-table :data="tableData">
    <y-column-text prop="name" label="姓名" />
    <y-column-operation label="label函数" :options="options1" />
    <y-column-operation label="显示/隐藏" :options="options2" />
    <y-column-operation label="按钮组" :options="options3" />
  </y-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const tableData = ref([
  {
    id: '1',
    name: '老刘',
    age: '80',
    gender: '男',
    status: 'START'
  },
  {
    id: '2',
    name: '小刘',
    age: '8',
    gender: '女',
    status: 'STOP'
  }
]);

const options1 = ref([
  {
    prop: 'view',
    label: scope => {
      return scope.row.name + '详情';
    },
    confirm: scope => {
      ElMessage.success('This is a message.');
    }
  }
]);

const options2 = ref([
  {
    prop: 'button1',
    label: '按钮1',
    show: (scope, item) => {
      return scope.row.status === 'START';
    }
  },
  {
    prop: 'button2',
    label: '按钮2',
    show: (scope, item) => {
      return scope.row.status === 'STOP';
    }
  },
  {
    prop: 'view',
    label: '切换状态',
    confirm: (scope, item) => {
      scope.row.status = scope.row.status === 'START' ? 'STOP' : 'START';
    }
  }
]);

const options3 = ref([
  {
    prop: 'button1',
    label: '按钮1'
  },
  {
    prop: 'button2',
    label: '按钮2',
    dropdown: true
  },
  {
    prop: 'button3',
    label: '按钮3',
    dropdown: true
  }
]);
</script>

隐藏源码

按钮禁用及tooltip提示

内部使用 y-pop 组件展示 tooltip

disabled 属性值可以是：boolean，[boolean,string]，(scope,item)=>boolean | [boolean,string]，当按钮禁用时，可以同时配置对应的 tooltip

• boolean值表示按钮是否禁用
• string值表示按钮禁用时的提示，未明确设置时会使用默认提示文本
• ColumnOperation 组件的 disabledDefaultTip 属性和 appWrap 组件的 columnOpertaion.disabledDefaultTip 都可以设置按钮禁用时的默认提示文本，前者优先级较高

共 0项数据

• 1

Go to

<template>
  <y-table :data="tableData">
    <y-column-text prop="name" label="姓名" />
    <!-- 禁用但不显示提示文案 -->
    <y-column-operation label="无tooltip" :options="options4" />
    <!-- 禁用并显示默认提示文案 -->
    <y-column-operation label="默认tooltip" :options="options4" disabledDefaultTip="无权限" />
    <!-- 禁用并自定义提示文案 -->
    <y-column-operation label="动态tooltip" :options="options5" />
  </y-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const tableData = ref([
  {
    id: '1',
    name: '老刘',
    age: '80',
    gender: '男',
    status: 'START'
  },
  {
    id: '2',
    name: '小刘',
    age: '8',
    gender: '女',
    status: 'STOP'
  }
]);

const options4 = ref([
  {
    prop: 'edit',
    label: '编辑',
    disabled: true
  }
]);

const options5 = ref([
  {
    prop: 'edit',
    label: '编辑',
    disabled: [true, '自定义提示']
  },
  {
    prop: 'edit2',
    label: '编辑2',
    disabled: (scope, item) => {
      if (scope.row.status === 'STOP') {
        return [true, '停止状态不可编辑'];
      } else {
        return false;
      }
    }
  }
]);
</script>

隐藏源码

按钮popover

内部使用 y-pop 组件显示 popover

popProps 属性值用于配置按钮的 popover 弹框行为；默认情况下 popProps.noPop === true，即不展示 popover

共 0项数据

• 1

Go to

<template>
  <y-table :data="tableData">
    <y-column-text prop="name" label="姓名" />
    <y-column-operation label="popover" :options="options6" />
  </y-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const tableData = ref([
  {
    id: '1',
    name: '老刘',
    age: '80',
    gender: '男',
    status: 'START'
  },
  {
    id: '2',
    name: '小刘',
    age: '8',
    gender: '女',
    status: 'STOP'
  }
]);

const options6 = ref([
  {
    prop: 'delete',
    label: '删除',
    // 默认不显示popover，只有confirm方法生效，表示按钮本身的点击事件
    // noPop: true,
    confirm: (scope, item) => {
      ElMessage.success('确认删除');
    }
  },
  {
    prop: 'delete2',
    label: '删除2',
    dropdown: true,
    // 显示popover时，confirm和cancel方法都生效，表示弹出框的确认和取消事件
    noPop: false,
    popProps: {
      popContent: '是否确认删除该数据？'
    },
    confirm: (scope, item) => {
      ElMessage.success('确认删除');
    },
    cancel: (scope, item) => {
      ElMessage.info('取消删除');
    }
  }
]);
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
options	操作项配置数组或函数	array/ Function	[]
disabledDefaultTip	按钮禁用时的默认提示文本	string	''
label	显示的列标题	string	—
prop	列内容的字段名， 也可以使用 property属性	string	—
width	列的宽度，固定的	string / number	'auto'
min-width	列的最小宽度，会把剩余宽度按比例分配给设置了 min-width 的列	string / number	100
fixed	列是否固定在左侧或者右侧。 true 表示固定在左侧 true	enum / boolean	'right'
render-header	列标题 Label 区域渲染的函数	Function	—
resizable	是否可以通过拖动改变宽度（需要在 el-table 上设置 border=true）	boolean	true
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	boolean / object	false
align	内容对齐方式	enum	'left'
header-align	表头对齐方式， 若不设置该项，则使用表格的对齐方式	enum	'left'
class-name	列的 className	string	'y-column-operation'
label-class-name	当前列标题的自定义类名	string	—

ColumnOperationItemType

属性	说明	类型	默认值
label	操作项的文本，可以是字符串或函数	string / Function	-
prop	操作项的唯一标识	string	-
loading	按钮是否显示加载状态	boolean	false
disabled	按钮是否禁用，支持多种格式	boolean / array / Function	false
show	按钮是否显示	boolean / Function	true
dropdown	是否以下拉菜单形式展示	boolean / Function	false
noPop	是否显示popover，默认不显示	boolean / Function	true
popProps	popover的完整属性配置	object / Function	{}
confirm	操作项的确认函数	Function	-
cancel	操作项的取消函数，在显示popover时生效	Function	-

Slots

名称	说明	参数
header	自定义表头内容	object
[prop]	自定义操作项内容，prop为操作项的prop值	object