<template><!-- 使用 customRow 方法设置行属性 --><a-table:columns="staffColumnsSort":dataSource="dataSource":rowKey="record => record.staffId":customRow="isSort ? customRow : null"><!-- 拖拽icon --><template #sort><HolderOutlined /></template></a-table></template><script>import { ref } from 'vue'import { staffColumnsSort} from '../../columns'import { HolderOutlined } from '@ant-design/icons-vue'export default{components: {HolderOutlined},setup(){const sourceObj = ref({}) //源对象const targetObj = ref({}) //目标对象const dataSource = ref([])//列表数据const sortInfo = ref([])//整理后发给后台的数组const isSort = ref(true)//是否在排序状态下//移除拖拽样式方法const removeStyle = () => {document.getElementsByClassName('ant-table-tbody').forEach(parent => {parent.getElementsByTagName('tr').forEach(child => {child.removeAttribute('style')})})}const customRow = (record, index) => {return {style: {cursor: 'grab'},// 鼠标移入onMouseenter: event => {// 兼容IEvar ev = event || window.eventev.target.draggable = true},// 开始拖拽onDragstart: event => {// 兼容IEvar ev = event || window.event// 阻止冒泡ev.stopPropagation()// 得到源目标数据sourceObj.value = record},// 拖动元素经过的元素onDragover: event => {// 兼容 IEvar ev = event || window.event// 阻止默认行为ev.preventDefault()console.log('ant-table-tbody元素个数', document.getElementsByClassName('ant-table-tbody'))console.log('拖动元素经过的元素索引', index)console.log('表格子元素',document.getElementsByClassName('ant-table-tbody')[0].getElementsByTagName('tr')[index])//表格右侧操作栏使用了fixed固定定位，因此ant-table-tbody有两个document.getElementsByClassName('ant-table-tbody').forEach(parent => {parent.getElementsByTagName('tr').forEach((item, i) => {if (i === index) {item.style.borderBottom = '2px solid #1677ff'} else {item.removeAttribute('style')}})})},// 鼠标松开onDrop: event => {// 兼容IEvar ev = event || window.event// 阻止冒泡ev.stopPropagation()// 得到目标数据targetObj.value = recordconsole.log('源数据', sourceObj.value)console.log('目标数据', targetObj.value)const newArr = dataSource.valueconst source = newArr.findIndex(item => item.staffId ==sourceObj.value.staffId)const target = newArr.findIndex(item => item.staffId ==targetObj.value.staffId)newArr.splice(source, 1)newArr.splice(target, 0, sourceObj.value)newArr.forEach((item, index) => {sortInfo.value.push({staffId: item.staffId,sortIndex: index})})//松开鼠标后，清除底部拖拽样式removeStyle()},//鼠标移出onMouseleave: event => {// 兼容IEvar ev = event || window.event//鼠标移出拖拽范围禁止拖拽并清除拖拽效果ev.target.draggable = falseremoveStyle()}}} return {sourceObj, targetObj,dataSource,sortInfo,removeStyle,customRow,isSort }}}</script>
//columns.jsexport const staffColumnsSort = [{title: '',dataIndex: 'sort',key: 'sort',align: 'left',width: 92,slots: { customRender: 'sort' }},{title: '序号',dataIndex: 'id1',key: 'id1',align: 'left',width: 117,slots: { customRender: 'id1' }},{title: '姓名',dataIndex: 'staffName',key: 'staffName',align: 'left',slots: { customRender: 'staffName' },ellipsis: true,width: 225},{title: '账号',dataIndex: 'mobile',key: 'mobile',align: 'left',ellipsis: true,slots: { customRender: 'mobile' },width: 174},{title: '所属组织',dataIndex: 'departmentName',key: 'departmentName',align: 'left',ellipsis: true,slots: { customRender: 'departmentName' },width: 172},{title: '指纹录入',dataIndex: 'fingerprintEntry',key: 'fingerprintEntry',align: 'left',width: 144,ellipsis: true,slots: { customRender: 'fingerprintEntry' }},{title: '操作',dataIndex: 'action',key: 'action',align: 'left',slots: { customRender: 'action' },fixed: 'right',width: 124}]
