|
|
@@ -13,6 +13,7 @@
|
|
|
@focus="inputFocus"
|
|
|
@click="clickInput"
|
|
|
@blur="inputBlur"
|
|
|
+ @keydown.esc="tableConfig.isShow = false"
|
|
|
@keydown.enter.prevent="keyEnter"
|
|
|
@mousedown.stop
|
|
|
@keydown.up.prevent="keyUp"
|
|
|
@@ -35,13 +36,12 @@
|
|
|
</el-table>
|
|
|
<el-pagination
|
|
|
small
|
|
|
- background
|
|
|
:pager-count="5"
|
|
|
:total="tableData.total"
|
|
|
:current-page="tableData.currentPage"
|
|
|
:page-size="tableData.pageSize"
|
|
|
@size-change="handleSizeChange"
|
|
|
- layout="total,prev, pager, next, jumper"
|
|
|
+ layout="total,prev, pager, next"
|
|
|
@current-change="handleCurrentChange"/>
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
@@ -57,10 +57,12 @@ const props = defineProps({
|
|
|
type: [String, Object],
|
|
|
},
|
|
|
code: {
|
|
|
- type: String
|
|
|
+ type: String,
|
|
|
+ default: 'code'
|
|
|
},
|
|
|
name: {
|
|
|
- type: String
|
|
|
+ type: String,
|
|
|
+ default: 'name'
|
|
|
},
|
|
|
rowKey: {
|
|
|
type: String,
|
|
|
@@ -81,8 +83,8 @@ const props = defineProps({
|
|
|
tableHeader: {
|
|
|
type: Array,
|
|
|
default: [
|
|
|
- {label: '编码', prop: 'code'},
|
|
|
- {label: '名称', prop: 'name'},
|
|
|
+ {label: '编码', prop: 'code', width: 120},
|
|
|
+ {label: '名称', prop: 'name', width: 220},
|
|
|
]
|
|
|
},
|
|
|
placeholder: {
|
|
|
@@ -134,7 +136,8 @@ const keyUp = () => {
|
|
|
if (tableConfig.value.isShow) {
|
|
|
currentIndex--;
|
|
|
if (currentIndex < 0) {
|
|
|
- currentIndex = tableData.value.pageSize - 1
|
|
|
+ currentIndex = tempTableList.value.length - 1
|
|
|
+ keyLeft()
|
|
|
}
|
|
|
rowAddClass()
|
|
|
}
|
|
|
@@ -143,8 +146,9 @@ const keyUp = () => {
|
|
|
const keyDown = () => {
|
|
|
if (tableConfig.value.isShow) {
|
|
|
currentIndex++;
|
|
|
- if (currentIndex > tableData.value.pageSize - 1) {
|
|
|
+ if (currentIndex > tempTableList.value.length - 1) {
|
|
|
currentIndex = 0
|
|
|
+ keyRight()
|
|
|
}
|
|
|
rowAddClass()
|
|
|
}
|
|
|
@@ -166,6 +170,9 @@ const keyLeft = () => {
|
|
|
} else {
|
|
|
tableData.value.currentPage--
|
|
|
}
|
|
|
+ if (currentIndex > tempTableList.value.length) {
|
|
|
+ currentIndex = 0
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const keyRight = () => {
|
|
|
@@ -193,31 +200,54 @@ const rowAddClass = async () => {
|
|
|
}
|
|
|
|
|
|
const inputFocus = () => {
|
|
|
- placeholder.value = props.modelValue
|
|
|
+ if (isObj) {
|
|
|
+ placeholder.value = props.modelValue[props.name]
|
|
|
+ } else {
|
|
|
+ placeholder.value = props.modelValue;
|
|
|
+ }
|
|
|
inputData.value = ''
|
|
|
}
|
|
|
|
|
|
const clickInput = () => {
|
|
|
- placeholder.value = props.modelValue
|
|
|
+ if (isObj) {
|
|
|
+ placeholder.value = props.modelValue[props.name]
|
|
|
+ } else {
|
|
|
+ placeholder.value = props.modelValue;
|
|
|
+ }
|
|
|
inputData.value = ''
|
|
|
tableConfig.value.isShow = !tableConfig.value.isShow
|
|
|
}
|
|
|
|
|
|
const highlightRow = async () => {
|
|
|
await nextTick()
|
|
|
- if (props.currentKey === null) return
|
|
|
+ if (!isObj && props.currentKey === null) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
let row = tableRef.value.$el.querySelectorAll('.el-table__row')
|
|
|
for (let i = 0; i < tempTableList.value.length; i++) {
|
|
|
let item = tempTableList.value[i]
|
|
|
row[i].classList.remove('current_key')
|
|
|
- if (item[props.rowKey] === props.currentKey) {
|
|
|
- row[i].classList.add('current_key')
|
|
|
+ if (isObj) {
|
|
|
+ if (item[props.rowKey] === props.modelValue[props.code]) {
|
|
|
+ row[i].classList.add('current_key');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item[props.rowKey] === props.currentKey) {
|
|
|
+ row[i].classList.add('current_key');
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const inputBlur = () => {
|
|
|
- inputData.value = props.modelValue
|
|
|
+ if (isObj) {
|
|
|
+ inputData.value = props.modelValue[props.name]
|
|
|
+ } else {
|
|
|
+ inputData.value = props.modelValue;
|
|
|
+ }
|
|
|
+ if (!inputData.value) {
|
|
|
+ placeholder.value = props.placeholder
|
|
|
+ }
|
|
|
tableConfig.value.isShow = false
|
|
|
}
|
|
|
|
|
|
@@ -235,32 +265,34 @@ const handleCurrentChange = async (val) => {
|
|
|
}
|
|
|
|
|
|
const clickRow = async (row) => {
|
|
|
- selectedRowStyle()
|
|
|
+ if (isObj) {
|
|
|
+ props.modelValue[props.code] = row['code']
|
|
|
+ props.modelValue[props.name] = row['name']
|
|
|
+ }
|
|
|
+ await highlightRow()
|
|
|
emit('rowClick', row)
|
|
|
tableConfig.value.isShow = false
|
|
|
}
|
|
|
|
|
|
-const selectedRowStyle = () => {
|
|
|
- let row = tableRef.value.$el.querySelectorAll('.el-table__row')
|
|
|
- for (let i = 0; i < tempTableList.value.length; i++) {
|
|
|
- row[i].classList.remove('current_key')
|
|
|
- if (i === currentIndex) {
|
|
|
- row[i].classList.add('current_key')
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-watch(() => props.modelValue, () => {
|
|
|
- inputData.value = props.modelValue
|
|
|
-}, {immediate: true, deep: true})
|
|
|
-
|
|
|
const inputRef = ref()
|
|
|
const focus = () => {
|
|
|
inputRef.value.focus()
|
|
|
}
|
|
|
|
|
|
+const isObj = typeof props.modelValue === 'object'
|
|
|
onMounted(() => {
|
|
|
rowAddClass()
|
|
|
+ if (isObj) {
|
|
|
+ watch(() => props.modelValue[props.code], () => {
|
|
|
+ inputData.value = props.modelValue[props.name]
|
|
|
+ highlightRow()
|
|
|
+ }, {immediate: true, deep: true})
|
|
|
+ } else {
|
|
|
+ watch(() => props.modelValue, () => {
|
|
|
+ inputData.value = props.modelValue
|
|
|
+ highlightRow()
|
|
|
+ }, {immediate: true, deep: true})
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
defineExpose({
|