🐛 [Bug]: TinyGrid 表格组件的sortable属性无法动态响应 #3898
Description
Version
3.27
Vue Version
3.4.27
Link to minimal reproduction
<template>
<div>
<div>
<tiny-button @click="click">手动排序 sort</tiny-button>
<tiny-button @click="kg('employees')">开关 员工数 sort</tiny-button>
<tiny-button @click="kg('city')">开关 城市 sort</tiny-button>
<tiny-button @click="kg('boole')">开关 布尔值 sort</tiny-button>
</div>
<br />
<tiny-grid
:data="tableData"
ref="gridRef"
highlight-current-row
border
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
>
<tiny-grid-column v-for="(item,index) in columns" :key="index" :type="item.type" :width="item.width" :field="item?.field" :title="item.title" :sortable="item.sortable" :editor="item.editor" :align="item.align" :format-text="item.formatText" ></tiny-grid-column>
<!-- <tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
<tiny-grid-column
field="createdDate"
:editor="{ component: 'input', autoselect: true }"
title="创建日期"
></tiny-grid-column>
<tiny-grid-column field="city" :editor="{ component: 'input', autoselect: true }" title="城市"></tiny-grid-column>
<tiny-grid-column
field="boole"
title="布尔值"
align="center"
format-text="boole"
:editor="checkboxEdit"
></tiny-grid-column> -->
</tiny-grid>
</div>
</template>
<script setup lang="jsx">
import { ref,computed } from 'vue'
import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
const tableData = ref([
{
id: '1',
name: 'GFD 科技 YX 公司',
city: '福州',
employees: 800,
createdDate: '2014-04-30 00:56:00',
boole: false
},
{
id: '2',
name: 'WWW 科技 YX 公司',
city: '深圳',
employees: 300,
createdDate: '2016-07-08 12:36:22',
boole: true
},
{
id: '3',
name: 'RFV 有限责任公司',
city: '中山',
employees: 1300,
createdDate: '2014-02-14 14:14:14',
boole: false
},
{
id: '4',
name: 'TGB 科技 YX 公司',
city: '龙岩',
employees: 360,
createdDate: '2013-01-13 13:13:13',
boole: true
},
{
id: '5',
name: 'YHN 科技 YX 公司',
city: '韶关',
employees: 810,
createdDate: '2012-12-12 12:12:12',
boole: true
},
{
id: '6',
name: 'WSX 科技 YX 公司',
city: '黄冈',
employees: 800,
createdDate: '2011-11-11 11:11:11',
boole: true
},
{
id: '7',
name: 'KBG 物业 YX 公司',
city: '赤壁',
employees: 400,
createdDate: '2016-04-30 23:56:00',
boole: false
},
{
id: '8',
name: '深圳市福德宝网络技术 YX 公司',
boole: true,
city: '厦门',
createdDate: '2016-06-03 13:53:25',
employees: 540
}
])
const gridRef = ref()
const employeesSort=ref(true)
const citySort=ref(true)
const booleSort=ref(true)
const columns=computed(()=>([
{type:'index',width:'60'},
{type:'selection',width:'60'},
{type:'',width:'',field:'employees',title:'员工数',sortable:employeesSort.value},
{field:'createdDate',title:'创建日期',editor:{ component: 'input', autoselect: true }},
{field:'city',title:'城市',editor:{ component: 'input', autoselect: true },sortable:citySort.value},
{field:'boole',title:'布尔值',editor:checkboxEdit,align:'center',formatText:'boole',sortable:booleSort.value},
// {type:'',width:'',field:'',title:'',editor:'',align:'',formatText:'',sortable:''},
]))
function kg(field){
if(field==='employees'){
employeesSort.value=!employeesSort.value
}else if(field==='city'){
citySort.value=!citySort.value
}else if(field==='boole'){
booleSort.value=!booleSort.value
}
console.log(columns.value)
}
function click() {
gridRef.value.sort('employees', 'asc')
}
function checkboxEdit(h, { row, column }) {
return (
<input
type="checkbox"
checked={row.boole}
onChange={(event) => {
row[column.property] = event.target.checked
}}
/>
)
}
</script>Step to reproduce
1、点击按钮“开关 xx sort”，动态切换表格列的列配置中的sortable值，表格表头的排序按钮不会切换显示或隐藏
2、修改sort变量（employeesSort、citySort、booleSort）的默认值，表格重新渲染加载出来时，可以根据配置的默认值在表头显示排序按钮
What is expected
表格表头的排序按钮，可以根据变量配置，动态渲染显示或隐藏
What is actually happening
表格表头的排序按钮，仅会在初始化是配置的值显示或隐藏，并不会因为动态改变而改变
What is your project name
TinyGrid
Any additional comments (optional)
OpenTiny Vue 演练场 会复现